如何在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 + " %"; 
} 

这里是工作提琴​​