Highcharts:删除仅在图表上显示的图例并保留底部图例

时间:2017-07-03 11:41:03

标签: javascript charts highcharts

如何删除图表上显示的图例,并将图例保留在图表的底部?

enter image description here

Highcharts.chart('operatingSystemReleaseChart', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                    margin: [0, 0, 40, 0],
                    spacingTop: 0,
                    spacingBottom: 0,
                    spacingLeft: 0,
                    spacingRight: 0,
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                title: {
                  text: ""
                },
                tooltip: {
                    shared: false,
                    borderRadius: 3,
                    borderWidth: 0,
                    shadow: false,
                    enabled: true,
                    backgroundColor: 'none',
                    useHTML: true,
                    formatter: function () {
                        return '<div class="tooltipHC"><div>'+this.point.name+'</div>' +
                               '<div>Total:<b class="pull-right">'+this.y+'</b></div>' +
                               '<div>Total(%):<b class="pull-right">'+Highcharts.numberFormat(this.percentage)+' %</b></div></div>';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        size: "100%",
                        dataLabels: {
                            enabled: true,
                        },
                        showInLegend: true,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Total',
                    colorByPoint: true,
                    data: arrayForPieChart
                }]
            });

1 个答案:

答案 0 :(得分:2)

plotOptions.pie中,确保dataLabels属性enabled设置为false

以下是一个示例 - https://codepen.io/Inlesco/pen/EXLPVb