如何在PIE图表中显示图表从图表到饼图钻取高图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在PIE图表中显示图表从图表到饼图钻取高图相关的知识，希望对你有一定的参考价值。
我想知道如何显示饼图的传奇，我目前完成了饼图钻取的列，但饼图没有传说，我想知道我怎么能把它？我尝试将legend = true但它仍然没有显示在饼图中。
我也尝试过：
pie：{allowPointSelect：true，cursor：'pointer'，dataLabels：{enabled：false}，showInLegend：true}
我的代码如下：
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Chart showing the total vs match dialogs'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
var mychart = $('#container').highcharts();
var mytotal = 0;
for (i = 0; i < mychart.series.length; i++) {
if (mychart.series[i].visible) {
mytotal = {!! $countTotalRecord['low confidence'] !!} + {!! $countTotalRecord['no answer'] !!} + {!! $countTotalRecord['missing intent'] !!} + {!! $countTotalRecord['webhook fail'] !!};
}
}
var pcnt = (this.y / mytotal) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
tooltip: {
// headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '{point.name}: <b>{point.y}</b>'
},
credits:{
enabled:false
},
series: [{
name: 'front',
colorByPoint: true,
data: [{
name: 'Total',
y: {!! $countTotalRecord['total'] !!},
drilldown: 'total'
}, {
name: 'Match',
y: {!! $countTotalRecord['match'] !!},
drilldown: 'match'
}]
}],
drilldown: {
series: [{
name: 'total',
id: 'total',
type:'pie',
data: [
[
'Low Confidence',
{!! $countTotalRecord['low confidence'] !!}
],
[
'No Answer',
{!! $countTotalRecord['no answer'] !!}
],
[
'Missing Intent',
{!! $countTotalRecord['missing intent'] !!}
],
[
'Webhook Fail',
{!! $countTotalRecord['webhook fail'] !!}
]
]
}]
}
});答案
你必须使用
events: {
drilldown: function(e) {
this.options.legend["enabled"] = true; //legend shows
},
drillup: function(e) {
this.options.legend["enabled"] = false; //legend hides
},
}
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
this.options.legend["enabled"] = true;
},
drillup: function(e) {
this.options.legend["enabled"] = false;
},
}
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}],
dataLabels: {
enabled: false,
}
}],
drilldown: {
series: [{
type: 'pie',
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13
],
[
'v8.0',
17.2
],
[
'v9.0',
8.11
],
[
'v10.0',
5.33
],
[
'v6.0',
1.06
],
[
'v7.0',
0.5
]
]
}, {
type: 'pie',
name: 'Chrome',
id: 'Chrome',
data: [
[
'v40.0',
5
],
[
'v41.0',
4.32
],
[
'v42.0',
3.68
],
[
'v39.0',
2.96
],
[
'v36.0',
2.53
],
[
'v43.0',
1.45
],
[
'v31.0',
1.24
],
[
'v35.0',
0.85
],
[
'v38.0',
0.6
],
[
'v32.0',
0.55
],
[
'v37.0',
0.38
],
[
'v33.0',
0.19
],
[
'v34.0',
0.14
],
[
'v30.0',
0.14
]
]
}, {
type: 'pie',
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
2.76
],
[
'v36',
2.32
],
[
'v37',
2.31
],
[
'v34',
1.27
],
[
'v38',
1.02
],
[
'v31',
0.33
],
[
'v33',
0.22
],
[
'v32',
0.15
]
]
}, {
type: 'pie',
name: 'Safari',
id: 'Safari',
data: [
[
'v8.0',
2.56
],
[
'v7.1',
0.77
],
[
'v5.1',
0.42
],
[
'v5.0',
0.3
],
[
'v6.1',
0.29
],
[
'v7.0',
0.26
],
[
'v6.2',
0.17
]
]
}, {
type: 'pie',
name: 'Opera',
id: 'Opera',
data: [
[
'v12.x',
0.34
],
[
'v28',
0.24
],
[
'v27',
0.17
],
[
'v29',
0.16
]
]
}]
}
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>另一答案
...
legend: {
enabled: true
},
...
以上是关于如何在PIE图表中显示图表从图表到饼图钻取高图的主要内容，如果未能解决你的问题，请参考以下文章