Highcharts 3D饼图中tooltip如何显示出数量
分类:计算机 | 前端 | HighCharts 1191
更新:2021-03-01 20:43:03编辑
代码
var chart = Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: '2014年某网站不同浏览器访问量占比'
},
tooltip: {
pointFormat: '数量:{point.y}<br/>{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: '浏览器占比',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
Highcharts饼图加载数据时,可以直接加载数量值,饼图控件会自动将数量转换为百分比;如果想要在tooltip中显示饼图每一块的数值,从加载数据的语句可以看出,y就是分析项的实际数值,因此可以通过point.y取到该值
效果
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据10886
- 2three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目9449
- 3Microsoft Visual C++ Redistributable是什么,有什么作用?7182
- 4mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)5760
- 5uni-app使用经验—vue页面和html页面如何互相调用接口并传参5438
- 6Spring学习经验—@ResponseBody注解的使用说明4845
- 7Intellij IDEA下的版本控制VCS的启用与关闭4786
- 8Druid异常解决经验—java.sql.SQLException url not set4463
- 9如何用批处理命令(bat脚本)启动和停止windows服务4231
- 10nuxt.js项目中如何添加和使用全局变量4098
- 11解决SpringBoot使用maven下载不了jar包的问题3452
- 12linux中解压tar.gz文件报错“gzip: stdin: invalid compressed data--format violated”3344
- 13nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数3206
- 14在Nuxt.js项目的head中引用外部js文件3043
- 15在NVIDIA控制面板设置参数时提示“拒绝访问 无法应用选定的设置到您的系统”的解决方法之一3020