用高图谱将图表分组在饼图中 [英] Grouping Legends in Pie Chart with Highcharts
本文介绍了用高图谱将图表分组在饼图中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张包含所有显示数据的单个系列的饼图，这些数据具有源和命运两种类型的对象。默认情况下，出现的图例是每个对象名称，但我需要传说按类型分组对象，它们之间的源对象以及它们之间的命运对象。我在这篇文章中看到了类似的东西：
这是我所有的饼图它的传说，我需要只显示两个传说，一个蓝色部分，另一个蓝色部分。
{pre>
id：Group11App36，
data：[
{
name：apple.com，
y：2158959，
origin：destiny，
color：＃195580
name：machtv.info，
y：46442，
origin：destiny，
color ：＃195580
，
{
name：10.10.10.151，
y：462724，
origin：来源，
color：＃8fbbda
}，
{
name：10.10.11.213，
y：133774，
起源：源，
color：＃8fbbda
}，
{
name：10.10.8.120，
y：111039，
origin：source，
color：＃8fbbda
}，
{
name：10.10.13.99，
y：69530，
origin：source，
color：＃8fbbda
}，
{
name： 10.10.8.9，
y：66338，
origin：source，
color：＃8fbbda
}，
{
name：10.10.12.36，
y：64559，
origin：source，
color：＃8fbbda
$ name b
$ b $颜色：＃8fbbda
}，
{
name：10.10.11.196，
y：53450，
origin： 源，
color：＃8fbbda
}，
{
name：10.10.12.191，
y：44372 ，
origin：源，
颜色：＃8fbbda
}，
{
name：10.10.10.119，
y：43556，
origin： 源，
color：＃8fbbda
}，
{
name：10.10.12.149，
y：36618 ，
origin：source，
color：＃8fbbda
}，
{
name：10.10.11.139，
y：35831，
origin：source，
color：＃8fbbda
}，
{
name：10.10.12.42，
y：35316，
origin：source，
color：＃8fbbda
}，
name：10.10.10.17，
y：34151，
origin：source，
color：＃ 8fbbda
，
{
name：10.10.10.125，
y：33135，
origin：source，
color：＃8fbbda
}，
{
name：10.10.10.117，
y：32885，
origin：源，
color： ＃8fbbda
}，
{
name：10.10.11.93，
y：31926，
origin：source ，
color：＃8fbbda
}，
{
name：10.10.12.102，
y：31816，
origin：source，
color：＃8fbbda
}
]
}
预先感谢！
解决方案我不认为它可能没有一个自定义的传说
这里是一个例子（自定义传说）
var data = [{name：apple.com，y：2158959，origin：destiny，color： 195580}，{name：machtv.info，y：46442，origin：destiny，color：＃195580}，{name：10.10.10.151， y：462724，origin：source，color：＃8fbbda}，{name ：10.10.11.213，y：133774，origin：source，color：＃8fbbda}，{name：10.10.8.120，y：111039，origin ：source，color：＃8fbbda}，{name：10.10.13.99，y：69530，origin：source，color：＃8fbbda} ，{name：10.10.8.9，y：66338，origin：source，color：＃8fbbda}，{name：10.10.12.36， ：64559，origin：source，color：＃8fbbda}，{name：10.10.8.251，y：57293，origin：source，color： ＃8fbbda}，{name：10.10.11.196，y：53450，origin：source，color：＃8fbbda}，{name：10.10.12.191 ，y：44372，origin：source，color：＃8fbbda}，{name：10.10.10.119，y：43556，origin color：＃8fbbda}，{name：10.10.12.149，y：36618，origin：source，color：＃8fbbda}，{name ：10.10.11.139，y：35831，origin：source，color：＃8fbbda}，{name：10.10.12.42，y：35316，origin ：source，color：＃8fbbda}，{name：10.10.10.17，y：34151，origin：source ，color：＃8fbbda}，{name：10.10.10.125，y：33135，origin：source，color：＃8fbbda}，{name ：10.10.10.117，y：32885，origin：source，color：＃8fbbda}，{name：10.10.11.93，y：31926，原始：源，颜色：＃8fbbda}，{name：10.10.12.102，y：31816，origin：source，color：＃8fbbda }]; Highcharts.chart（'container'，{chart：{plotBackgroundColor：null，plotBorderWidth：null，plotShadow：false，type：'pie'}，title：{text：'Banyantmaya out'}，tooltip：{pointFormat：'{series ：pointname：}< b> {point.percentage：.1f}％< / b>'}，plotOptions：{pie：{allowPointSelect：true，cursor：'pointer'，dataLabels：{enabled：true，formatter： function（）{return'< b> + this.point.name +'< / b>：'+ this.percentage.toFixed（2）+'％';}}，showInLegend：false}}，series ：{{colorByPoint：true，data：data}]}，function（chart）{$ legend = $（'＃customLegend'）; var types = chart.series [0] .data.reduce（（arr，{origin，如果（obj）obj.indexes.push（i）; else arr.push（{origin，if（obj）obj.indexes.push（i）; else）{var obj = arr.find（o => o.origin === origin） color，indexes：[i]}）; return arr;}，[]）; types.forEach（type => {$ legend.append（ < label class =serieLabeldata-name ='+ type.origin +'>< span class =symbolstyle =background-color：'+ type.color +'>< / span>< span class =name>'+ type.origin +'< / span>< / label>'）; }）; $（'＃customLegend .serieLabel'）。click（function（）{var indexes = types.find（t => t.origin === this.dataset.name）.indexes; $（this）.toggleClass（' hide（）'）; indexes.forEach（（inx，i）=> {var point = chart.series [0] .data [inx]; point.setVisible（！point.visible，i === indexes.length - 1 ）;}）;}）;}）;
div #customLegend {background-color：#fff; text-align：center; padding-bottom：20px; } .symbol {width：12px;身高：12px; -webkit-border-radius：10px; border-radius：10px;显示：inline-block; } .name {margin：0 20px 0 10px;显示：inline-block; vertical-align：text-bottom; font-weight：bold; font-size：14px; } .serieLabel {cursor：pointer; text-transform：大写; } .serieLabel.hide {opacity：0.2; }
< script src =https：// code .jquery.com / jquery-3.1.1.min.js>< / script>< script src =https://code.highcharts.com/highcharts.js>< / script>< ; script src =https://code.highcharts.com/modules/exporting.js>< / script>< div id =container>< / div>< div id =customLegend >< / div>
I have a pie chart that has a single series with all the data it shows, this data has objects of two types, source and destiny. By default the legends that appear are of each object name, but I need that the legends group the objects by type, source objects between them and destiny objects between them. I saw something similar in this post: Grouping Legends in Highcharts but it does not work for pie charts, I need that same thing but it works with pie charts. I'm using highcharts 4.2.6 .
Here is my pie chart with all its legends, I need show only two legends, one for blue section and the other one for light-blue section.
There is an example of my series object:
{ "id": "Group11App36", "data": [ { "name": "apple.com", "y": 2158959, "origin": "destiny", "color": "#195580" }, { "name": "machtv.info", "y": 46442, "origin": "destiny", "color": "#195580" }, { "name": "10.10.10.151", "y": 462724, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.213", "y": 133774, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.120", "y": 111039, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.13.99", "y": 69530, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.9", "y": 66338, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.36", "y": 64559, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.251", "y": 57293, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.196", "y": 53450, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.191", "y": 44372, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.119", "y": 43556, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.149", "y": 36618, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.139", "y": 35831, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.42", "y": 35316, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.17", "y": 34151, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.125", "y": 33135, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.117", "y": 32885, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.93", "y": 31926, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.102", "y": 31816, "origin": "source", "color": "#8fbbda" } ] }Thanks in advance!
解决方案i don't think its possible without a custom legends
here is an example (with custom legends)
var data = [{ "name": "apple.com", "y": 2158959, "origin": "destiny", "color": "#195580" }, { "name": "machtv.info", "y": 46442, "origin": "destiny", "color": "#195580" }, { "name": "10.10.10.151", "y": 462724, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.213", "y": 133774, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.120", "y": 111039, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.13.99", "y": 69530, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.9", "y": 66338, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.36", "y": 64559, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.251", "y": 57293, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.196", "y": 53450, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.191", "y": 44372, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.119", "y": 43556, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.149", "y": 36618, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.139", "y": 35831, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.42", "y": 35316, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.17", "y": 34151, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.125", "y": 33135, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.117", "y": 32885, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.93", "y": 31926, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.102", "y": 31816, "origin": "source", "color": "#8fbbda" }]; Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Banyantmaya out' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, formatter: function () { return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %'; } }, showInLegend: false } }, series: [{ colorByPoint: true, data: data }] }, function(chart) { $legend = $('#customLegend'); var types = chart.series[0].data.reduce((arr, {origin, color}, i) => { var obj = arr.find(o => o.origin === origin); if (obj) obj.indexes.push(i); else arr.push({ origin, color, indexes: [i] }); return arr; }, []); types.forEach(type => { $legend.append('<label class="serieLabel" data-name="' + type.origin + '"><span class="symbol" style="background-color:' + type.color + '"></span><span class="name">' + type.origin + '</span></label>'); }); $('#customLegend .serieLabel').click(function() { var indexes = types.find(t => t.origin === this.dataset.name).indexes; $(this).toggleClass('hide'); indexes.forEach((inx, i) => { var point = chart.series[0].data[inx]; point.setVisible(!point.visible, i === indexes.length - 1); }); }); });
div#customLegend { background-color: #fff; text-align: center; padding-bottom: 20px; } .symbol { width: 12px; height: 12px; -webkit-border-radius: 10px; border-radius: 10px; display: inline-block; } .name { margin: 0 20px 0 10px; display: inline-block; vertical-align: text-bottom; font-weight: bold; font-size: 14px; } .serieLabel { cursor: pointer; text-transform: capitalize; } .serieLabel.hide { opacity: 0.2; }
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container"></div> <div id="customLegend"></div>
这篇关于用高图谱将图表分组在饼图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
