本文介绍了用高图谱将图表分组在饼图中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张包含所有显示数据的单个系列的饼图，这些数据具有源和命运两种类型的对象。默认情况下，出现的图例是每个对象名称，但我需要传说按类型分组对象，它们之间的源对象以及它们之间的命运对象。我在这篇文章中看到了类似的东西：
这是我所有的饼图它的传说，我需要只显示两个传说，一个蓝色部分，另一个蓝色部分。
{
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
}
]
}
pre>
预先感谢！
解决方案我不认为它可能没有一个自定义的传说
这里是一个例子（自定义传说）
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>
这篇关于用高图谱将图表分组在饼图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！