highcharts 点击图例改变图例题目
时间: 2024-01-21 15:02:44 浏览: 36
可以通过 Highcharts 提供的 `legendItemClick` 事件来实现点击图例改变图例标题。具体实现步骤如下:
1. 在 `legend` 配置项中,设置 `itemEvents` 为 `['click']`,开启图例点击事件。
2. 在 `plotOptions` 配置项中,为相应的图表类型(如 `line`、`column` 等)设置 `events.legendItemClick` 属性,指定图例点击事件的回调函数。
3. 在回调函数中,通过 `this.name` 获取当前点击的图例名称,并使用 `chart.setTitle` 方法修改图表标题。
示例代码如下:
```javascript
Highcharts.chart('container', {
// 其他配置项
legend: {
itemEvents: ['click']
},
plotOptions: {
line: {
events: {
legendItemClick: function() {
var chart = this.chart;
var title = chart.title.textStr;
var name = this.name;
chart.setTitle({ text: title + ' - ' + name });
}
}
}
},
// 其他配置项
});
```
在以上代码中,我们为 `line` 图表类型设置了图例点击事件的回调函数。当用户点击某个图例时,回调函数会在当前 `chart` 对象的基础上获取当前图表的标题 `title`,并将当前点击的图例名称 `name` 拼接在标题后面,最后使用 `chart.setTitle` 方法更新图表标题。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)