Highcharts 饼图设置了显示图例 怎样给图例添加点击事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Highcharts 饼图设置了显示图例 怎样给图例添加点击事件相关的知识，希望对你有一定的参考价值。
饼图 设置了 showInLegend: true
也设置了 legendItemClick: function(event) xxx 不起作用 ,图例还是能点击
解决了； 方法写错位置了：
==================
在造图表的时候要把数据和数据的说明都选中啊。本回答被提问者采纳 参考技术B plotOptions:
point:
events:
legendItemClick: function (e)
// console.log(e.target.name)
如何使用值数组在 Highcharts 饼图图例中获取数据名称而不是“切片”？
【中文标题】如何使用值数组在 Highcharts 饼图图例中获取数据名称而不是“切片”？【英文标题】：How get data name in Highcharts pie chart legend instead of "Slice" using array of values? 【发布时间】：2016-09-06 23:30:23 【问题描述】：我正在 Highcharts 中创建一个带有图例的饼图。当我将系列指定为值数组（我的首选方法）时，图例会为每个值显示字符串“Slice”。如果我改为将系列指定为具有命名值的对象列表，我会正确看到数据名称。如果我将系列指定为值数组，我可以看到数据名称吗？
这里是不起作用但我想使用的代码：
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions(
lang:
decimalPoint: '.',
thousandsSep: ','
);
$(function ()
$('#container').highcharts(
chart:
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
,
plotOptions:
pie:
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels:
enabled: true,
format: 'point.y:,.0f'
,
title:
text: 'Rental Amounts for Paramount Directors'
,
legend:
enabled: true
,
xAxis:
categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
"SPIELBERG, S"],
,
series: [
name: 'Directors',
data: [74100000, 30673000, 36915000, 50000000, 90434000],
]
);
);
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
当我将系列指定为具有命名值的对象列表时，以下代码确实有效：
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions(
lang:
decimalPoint: '.',
thousandsSep: ','
);
$(function ()
$('#container').highcharts(
chart:
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
,
plotOptions:
pie:
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels:
enabled: true,
format: 'point.y:,.0f'
,
title:
text: 'Rental Amounts for Paramount Directors'
,
legend:
enabled: true
,
series: [
name: "Directors",
slicedOffset: 20,
data: [
name: "BADHAM, J",
y: 74100000
,
name: "COPPOLA, F",
y: 30673000
,
name: "GUILERMAN, J",
y: 36915000
,
name: "HILLER, A",
y: 50000000
,
name: "SPIELBERG, S",
y: 90434000
]
]
);
);
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
【问题讨论】：
【参考方案1】：5 年后，这样做：
legend:
enabled: true,
labelFormatter: function()
let legendName = this.series.chart.axes[0].categories[this.x];
return legendName;
【讨论】：
【参考方案2】：您可以使用 tooltip.formatter 和 legend.labelFormatter 并访问 highchart 选项来执行此操作。
对于工具提示文本：
tooltip:
formatter: function()
var sliceIndex = this.point.index;
var sliceName = this.series.chart.axes[0].categories[sliceIndex];
return 'The value for <b>' + sliceName +
'</b> is <b>' + this.y + '</b>';
,
对于传说：
legend:
enabled: true,
labelFormatter: function()
var legendIndex = this.index;
var legendName = this.series.chart.axes[0].categories[legendIndex];
return legendName;
,
直播demo.
【讨论】：
完美运行！谢谢！以上是关于Highcharts 饼图设置了显示图例 怎样给图例添加点击事件的主要内容，如果未能解决你的问题，请参考以下文章
Legenditemclick 上的 Highcharts 饼图避免切片饼图，但在图例项上显示动画
如何使用值数组在 Highcharts 饼图图例中获取数据名称而不是“切片”？
Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图