[英]Highcharts Treemap with multiple series: getting them all to show in legend
So I have 6 series I'm using in a single highcharts treemap chart where each series is it's own, smaller tree map. 所以我在一个高图树形图表中使用了6个系列,其中每个系列都是它自己的小树图。 I can't get each of the names of the series to appear in the legend because the showInLegend property is a level above the data property.
我无法让每个系列的名称出现在图例中,因为showInLegend属性是数据属性之上的级别。
I've tried two different configurations. 我尝试了两种不同的配置。 First: series is set to my chartData variable, which looks like: [{ name: key, stack: key, id: key, showInLegend: true, color: colors[key], data: sliced }, {...}] And so forth.
首先:系列设置为我的chartData变量,如下所示:[{name:key,stack:key,id:key,showInLegend:true,color:colors [key],data:sliced},{...}]等等。 This gives me a single treemap chart with each series underneath the previous, aka they are stacked on top of each other.
这给了我一个树形图表,每个系列都在前面的下面,也就是说它们堆叠在一起。
If I combine them all into a single data array, I can get the proper chart format I'm looking for, where each individual series is grouped by color/parent and so forth. 如果我将它们全部组合成一个数据数组,我可以得到我正在寻找的正确的图表格式,其中每个单独的系列按颜色/父级分组,依此类推。 This was done using data-less data points, like so: { name, id, showInLegend, color }
这是使用无数据点完成的,如下所示:{name,id,showInLegend,color}
and each of the other points then would be: { name parent value } 然后每个其他点将是:{name parent value}
This large data array is then given to a series array that looks like: [{ type: 'treemap', layoutAlgorithm: 'squarified', data: dataArray from above, }] 然后将这个大数据数组提供给一个系列数组,如下所示:[{type:'treemap',layoutAlgorithm:'squarified',data:dataArray from above,}]
Again, I want the chart to be multiple tree maps, not one jammed on top of the other. 同样,我希望图表是多个树图,而不是一个卡在另一个上面。 But i also need the legend to show all of those series' names
但我还需要传说来展示所有这些系列的名字
You can use unofficial legendType: 'point'
property and remove unnecessary elements in afterGetAllItems
legend event: 您可以使用非官方的
legendType: 'point'
属性并删除afterGetAllItems
图例事件中不必要的元素:
var H = Highcharts;
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems.splice(2, 6);
});
H.chart('container', {
series: [{
legendType: 'point',
showInLegend: true,
...
}]
});
Live demo: https://jsfiddle.net/BlackLabel/gp2qmvac/ 现场演示: https : //jsfiddle.net/BlackLabel/gp2qmvac/
API Reference: https://api.highcharts.com/highcharts/series.treemap.showInLegend API参考: https : //api.highcharts.com/highcharts/series.treemap.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts 文档: https : //www.highcharts.com/docs/extending-highcharts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.