今天用了菜鸟教程上的Highcharts饼图。
教程中对tooltip的设置如下
效果是鼠标悬停在饼图上时会显示 系列名称:百分比
对Highcharts饼图加载数据时,可以直接加载数量值,饼图控件会自动将数量转换为百分比,同样通过point.percentage可以取值呈现。
在鼠标悬停查看占比详情时,除了百分比往往还希望看到实际数值,这一点教程没有提及,经过自己摸索可以通过如下方法实现
从加载数据的语句可以看出,y就是分析项的实际数值,因此可以通过point.y取到该值
教程中对tooltip的设置如下
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
效果是鼠标悬停在饼图上时会显示 系列名称:百分比
对Highcharts饼图加载数据时,可以直接加载数量值,饼图控件会自动将数量转换为百分比,同样通过point.percentage可以取值呈现。
在鼠标悬停查看占比详情时,除了百分比往往还希望看到实际数值,这一点教程没有提及,经过自己摸索可以通过如下方法实现
var tooltip = {
pointFormat: '数量:{point.y} <br/>占比:{point.percentage:.1f}%'
};
从加载数据的语句可以看出,y就是分析项的实际数值,因此可以通过point.y取到该值
series= [{
data: [
{name: '项目1', y: 100 },
{name: '项目2', y: 59 }
]
}];