博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
分想下用highcharts制作的3d饼图
阅读量:6565 次
发布时间:2019-06-24

本文共 749 字,大约阅读时间需要 2 分钟。

hot3.png

升级4.0之后支持3D了,应该算是一件大事,网上有人已经做了些3D图表,分享下。

首先,需要说明hightcharts 4支持原生3d图,如果,你要做好效果的3d,建议下载最新的4版本。这是基础。

其次,3d饼图,需要在plotOptions中设置深度属性:

就是这样一句,设置为25:

plotOptions.pie.depth: 25

准备工作完了,我们开始制作3D饼图。

步骤一:按照老规矩,写入highcharts必要的JS:

步骤二:

我们为图表设定一个大小,高度为400px,用div将它包围,然后设置一个id为container,方便下面的js:

步骤三

填入js代码:

$(function () {    $('#container').highcharts({        chart: {            type: 'pie',            options3d: {				enabled: true,                alpha: 45,                beta: 0,            }        },        plotOptions: {            pie: {                depth: 25            }        },        series: [{            data: [2, 4, 6, 1, 3]        }]    });});

下面是代码和效果图:

highcharts 3D饼图代码

highcharts 3D饼图

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文为问答:

转载于:https://my.oschina.net/u/1163318/blog/261145

你可能感兴趣的文章
汇编笔记
查看>>
在线枚举内核模块函数及地址(win64位)
查看>>
deploy nginx using saltstack
查看>>
rsync实现文件传输
查看>>
zabbix常用Key
查看>>
你有钱但是你值钱吗?
查看>>
mysqldump命令详解
查看>>
oracle学习路线
查看>>
我的友情链接
查看>>
GDB调试core文件样例(如何定位Segment fault)
查看>>
URL 详解
查看>>
第13 章拦截器与事件(Interceptors and events)
查看>>
查询文章的上下篇Sql语句
查看>>
复制常用命令
查看>>
人,最先老去的,从来都不是容颜
查看>>
jumpGate部署
查看>>
使用 DrMemory 详细教程
查看>>
C语言strlen的一个问题
查看>>
TRUNCATE和DELETE有以下几点区别
查看>>
uboot学习之三-----uboot启动第一阶段--start.S之二
查看>>