如何在Highcharts Treemap中獲取百分比軸？

Question

我有一個HighCharts Treemap顯示一組包含子類別的類別。圖表的要點是顯示有多少數據位於類別A中，以及類別A有多少位於子類別A1中。

我創造了這個如下：

http://jsfiddle.net/jbcfk93m/

$(function() { 
$('#container').highcharts({ 
    series: [{ 
     colorByPoint: true, 
     layoutAlgorithm: "stripes", 
     alternateStartingDirection: true, 
     allowPointSelect: true, 
     point: { 
      events: { 
       click: function() { 
         alert(this.name + ": " + this.value); 
        } 
       } 
     }, 
     dataLabels: { 

     }, 
     type: "treemap", 
     levels: [{ 
      level: 1, 
      dataLabels: { 
       enabled: true, 
       align: 'right', 
       rotation: 30, 
       crop: false, 
       overflow: 'none', 
       inside: false, 
       style: { 
        fontSize: '15px', 
        fontWeight: 'bold' 
       } 
      } 
     }, { 
      level: 2, 
      dataLabels: { 
       style: { 
       } 
      }, 
      layoutAlgorithm: "stripes", 
     }], 
     data: [{ 
      // Add parents without values 
      id: 'CategoryA', 
      name: 'Category A' 
     }, { 
      id: 'CategoryB', 
      name: 'Category B', 
     }, { 
      // And the children with values 
      name: 'Subcat A1', 
      value: 4, 
      parent: 'CategoryA' 
     }, { 
      name: 'Subcat A2', 
      value: 6, 
      parent: 'CategoryA' 
     }, { 
      name: 'Subcat B1', 
      value: 6, 
      parent: 'CategoryB' 
     }, { 
      name: 'Subcat B2', 
      value: 2, 
      parent: 'CategoryB' 
     } 
     ] 
    }], 
    title: { 
     text: 'Treemap', 
     margin: 100 
    }, 
    xAxis: { 
     min: 0, 
     max: 100 
    } 
}); 
}); 

我想無論是X軸和Y在圖形顯示百分比軸，所以我可以更容易地看到多少的我數據處於特定類別。

有誰知道如何做到這一點？

Answer 1

我沒有在treemaps上找到關於axis的任何信息，我不確定是否在X和Y軸上顯示百分比會對您有很大幫助，因爲您基本上必須乘以X和Y上的值（例如如果你的subcat B1在X軸上從20％到100％，在Y軸上從60％到100％，那麼你必須做（100％-20％）*（100％ - 60％）= 32％ ）。

但是我確實實現了一個工具提示格式化程序，它將向您顯示當您將鼠標懸停在子類別上時的百分比。

formatter: function() { 
    var total = 0; 
    for (var i = 0; i < this.series.data.length; i++) 
    { 
     if (this.series.data[i].node.children.length == 0) 
     total+=this.series.data[i].node.val; 
    } 
    var value; 
    if (this.point.node.children.length == 0) 
    { 
     value = this.point.options.value; 
    } 
    else 
    { 
     value = this.point.node.childrenTotal; 
    } 

    return this.key + " " + (value/total) *100 + " %"; 
} 

這裏是工作提琴​​