Highcharts 饼图：如何在饼图中显示比例并在图例中显示数据

在Highcharts中，可以通过设置饼图的dataLabels属性来显示所占比例，并通过设置图例的labelFormat属性来显示具体数据。\n\n首先，要在饼图的plotOptions中设置dataLabels属性。该属性控制如何显示数据标签。可以设置enabled为true来启用数据标签显示，设置format来定义标签格式。具体代码如下：\n\njavascript\nplotOptions: {\n pie: {\n dataLabels: {\n enabled: true,\n format: '<b>{point.name}</b>: {point.percentage:.1f} %'\n }\n }\n}\n\n\n接下来，要在图例的labelFormat属性中设置具体数据的显示格式。该属性控制图例中的文本格式。可以使用{name}表示名称，{y}表示数据值等。具体代码如下：\n\njavascript\nlegend: {\n labelFormat: '{name}: {y}'\n}\n\n\n完整的示例代码如下：\n\njavascript\nHighcharts.chart('container', {\n chart: {\n type: 'pie'\n },\n plotOptions: {\n pie: {\n dataLabels: {\n enabled: true,\n format: '<b>{point.name}</b>: {point.percentage:.1f} %'\n }\n }\n },\n series: [{\n name: 'Brands',\n colorByPoint: true,\n data: [{\n name: 'Chrome',\n y: 61.41\n }, {\n name: 'Internet Explorer',\n y: 11.84\n }, {\n name: 'Firefox',\n y: 10.85\n }, {\n name: 'Edge',\n y: 4.67\n }, {\n name: 'Safari',\n y: 4.18\n }, {\n name: 'Other',\n y: 7.05\n }]\n }],\n legend: {\n labelFormat: '{name}: {y}'\n }\n});\n\n\n这样，饼图中的数据标签就会显示所占比例，图例中的文本也会显示具体数据。