highcharts实现3D饼状图

刚接触前端的时候作图大多数时候都用echarts，但今天项目中一个需求是要实现3D的饼状图，所以转向highcharts来实现，具体实现过程如下。
首先要引入所需的js文件，在官网详细说明该引入那些js文件

一、文件的使用
1、基础使用
Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，例如引入下面的文件即可创建基础的图表了。<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
注：Highcharts 从 4.2.0 开始，已经不依赖 jQuery（参考例子），如果你的页面中不需要 jQuery，那么无需引入；不依赖 jQuery 的原因是我们将去掉了适配器并支持 CommonJS 模块标准，也就是说 Highcharts 可以在所有 CommonJS 规范下的环境中运行（例如 Nodejs），这也使得我们的产品可以结合目前市面上常用的库使用，例如 React、Browserify 、Webpack、Vue、AngularJS 等。2、功能模块
功能模块是在 Highcharts 主要功能的基础做的扩展，是由官方发布的功能包，常用功能模块有：更多图表类型扩展模块（highcharts-more.js）
3D 图表模块 （highcharts-3d.js）
导出功能模块（modules/exporting.js）
金字塔图表类型（modules/funnel.js）
钻取功能模块（modules/drilldown.js）
数据加载功能模块（modules/data.js）
更多模块可以在下载的资源包的 modules 目录找到，具体的功能我们会在后面的教程中讲解。使用功能模块很简单，只需要引入对应的文件即可，唯一需要注意的是保证 highcharts.js 的引用顺序是在功能模块之前。例如启用导出功能时需要引入的文件及顺序是：
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>

二、文件引入完成之后需要一个放图表的容器

<div id="highEchart3" class="echartBox"></div>

注意需要给容器一个宽高。此处id要与var chart中的对应
三、图表的js内容

  var chart = Highcharts.chart('highEchart3', {chart: {type: 'pie',options3d: {enabled: true,alpha: 45,beta: 0}},credits: {enabled: false, //此处配置用来取消highcharts.com的链接},title: {text: '自建系统整合完成占比',align: 'center',x: -30,verticalAlign: 'bottom',y: 0},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',depth: 35,dataLabels: {enabled: false,format: '{point.name}'},showInLegend: true//控制图例显示}},legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle' //图例},series: [{type: 'pie',name: '',colors: ['#e67b30', '#426dbf'], //图表颜色data: [['自建系统', 45.0,],['国发系统', 26.8],]}]});

最后效果如下：

highcharts实现3D饼状图相关推荐

highcharts实现立体3D饼状图
最近做一个h5活动页,设计师给我设计出了一个3D饼状图,我当时觉得没啥,觉得强大的echarts应该能做出来的,因为公司的项目涉及到图表的都用的echarts,但是后来去echarts官网一查,没这个 ...
Jpgraph php怎么变异,php使用Jpgraph绘制3D饼状图的方法
此文实例介绍了php使用Jpgraph绘制3D饼状图的方法.分享给大伙供大家参考.具体实现方法如下: include ("src/jpgraph.php"); include (& ...
【echarts记录 -- 3d 饼状图实现】
echarts记录 -- 3d 饼状图实现实现效果效果1 效果2 代码实现效果效果1 效果2 代码 /************************* pie3D 尝试更新时间: 2020. ...
Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
JFreeChart在Struts2中实现3D饼状图统计
在Struts2中,用JFreeChart实现3D饼状图统计前段时间学习了一下JFreeChart,现在来整理一下自己所作的实例. 下面分别用两种方式来实现: 一种是以java应用程序的方式,一种是 ...
Ehcarts绘制3D饼状图
需要用到echarts.min.js和echarts-gl.min.js 网上找了半天没找到靠谱的自己查资料弄一个了方便自己以后看直接复制到html文件中即可运行 <!DOCTYPE html ...
Origin2017绘制3D饼状图去掉指定图例
Origin在绘制饼状图时,有时只想显示部分图例,如下图所示: 针对此,可以先绘制图像. 这里可以看到所有的图例都例举出来了.针对此,可以双击图例部分.可以看到图例变成了下面的内容: 针对这个,可以进 ...
vue实现3D饼状图
首先下载一下依赖,简单易懂直接使用就可 yarn add highcharts yarn add highcharts-3d 配置main.js import highcharts from 'hig ...
mysql 统计做饼状图_使用Highcharts结合PHP与Mysql生成饼状图
我们在做复杂的数据统计功能时会用到饼状图,饼状图用整个圆表示总体的数量或整体值1,用圆内各个扇形的大小表示各部分数量或该部分占总体的百分比,它可以清晰直观的表示各部分之间以及各部分与整体之间的数量关系 ...

highcharts实现3D饼状图

highcharts实现3D饼状图相关推荐

最新文章

热门文章