highcharts 柱状图 自定义属性
时间: 2023-09-18 16:14:59 浏览: 83
highcharts.js柱形图插件特效代码
Highcharts柱状图可以通过在series中添加自定义属性来实现。在给series中的每个数据点设置属性时,可以使用data属性来存储自定义属性的值。例如,如果我们要给每个数据点添加一个自定义属性as1,可以在series的data中添加一个包含as1属性的对象。代码如下所示:
series: [{
name: '年度',
data: [
{y: 1, as1: '属性值1'},
{y: 4, as1: '属性值2'},
{y: 4, as1: '属性值3'},
{y: 1, as1: '属性值4'},
{y: 3, as1: '属性值5'},
{y: 6, as1: '属性值6'},
{y: 1, as1: '属性值7'},
{y: 0, as1: '属性值8'},
{y: 6, as1: '属性值9'},
{y: 1, as1: '属性值10'},
{y: 2, as1: '属性值11'},
{y: 4, as1: '属性值12'}
]
}]
在tooltip的formatter函数中,可以通过this.point.as1来获取该数据点的自定义属性as1的值,并将其显示在tooltip中。例如,我们可以使用如下的tooltip配置来显示自定义属性as1的值:
tooltip: {
formatter: function() {
return '自定义属性: ' + this.point.as1;
}
}
这样,当鼠标悬停在柱状图上时,tooltip会显示每个数据点的自定义属性as1的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [highcharts的柱状图显示数据](https://blog.csdn.net/qq_28966143/article/details/83062036)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [纯Javascript的统计图形报表,带实例和详细的说明文档 Highcharts](https://download.csdn.net/download/auqyvpl/5277616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [Highcharts 的series自定义属性](https://blog.csdn.net/libra_ts/article/details/51489660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
阅读全文