hightcharts制作饼状图

2024-05-27 20:22:40

最近用到了饼状图，学习了highcharts，简单记录一下

highcharts一个开源js框架，用于制作各种图表，学习免费，商用收费！

echarts也是个开源框架，用于制作各种图表，学习和商用都是免费。echarts的API更加详细

一、js引用

<script src="charts/highcharts.js"></script>
   <script src="charts/highcharts-3d.js"></script>
   <script src="charts/exporting.js"></script>
   <script src="charts/highcharts-zh_CN.js"></script>

二、HTML部分

<div class="div1" style="height:250px;width:700px;" >
                       <div id="containerA" class="div-inline" style="height:250px;width:50%;" ></div>
                       <div id="containerB" class="div-inline" style="height:250px;width:50%;" ></div>
                   </div>

三、js代码：

//饼状图
       var piePicture = {
               chart: {//通用设置
                   type: 'pie',//类型
                   options3d: {//3d设置
       enabled: true,
       alpha: 45,
       beta: 0
       }
               },
               title: {//标题
                   text: '烟草品牌前三'
               },
               credits: {//版权信息
                   enabled: false
               },
               navigation: {//导出模块中显示的按钮的选项集合
                   buttonOptions: {
                       enabled: false
                   }
               },
               tooltip: {// 提示框
                   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
               },
               plotOptions: {//数据列配置
                   series: {
                       allowPointSelect: true,//是否允许在点击数据点标记
                       cursor: 'pointer',//指定鼠标滑过数据列时鼠标的形状
                       backgroundColor: '#00F5FF',
                       depth: 35,
                       dataLabels: {//数据标签
                           enabled: true,
                           format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                           style: {
                               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                           }
                       }
                   }
               },
               series: [{//数据列
                   name:'占比',
                   colorByPoint: true,
                   data: [ {name: '利群',y: 11.84,},
                   {name: '红双喜',y: 10.85},
                   {name: '软中华',y: 4.67},
                   {name: '其他',y: 4.18}]
               }]
           }
       $('#containerA').highcharts(piePicture);
       $('#containerB').highcharts(piePicture);

四、效果图

hightcharts制作饼状图相关推荐

mysql生成饼状图_ECharts制作饼状图
本文结合实例给大家分享站长们常常用到的网站分析工具中的访问来源功能,我们使用Echarts制作饼状图,用于表现不同类目(访问来源)的数据在总和中的占比. HTML 和前几篇文章介绍的一样,首先引入Ec ...
echarts制作饼状图如何设置不同类别之间有一定间隔？
解决echarts饼状图不同类之间有一定间隔用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
若依项目制作饼状图和柱状图
这里的是根据年两分段做一个饼状图,根据性别人数制作柱状图 echarts+vue 饼状图先写一个实体类,将查到的数据放在实体类中,写一个mapper->mapper.xml->contr ...
jasper(二)：制作饼状图和柱状图
在新建一个框架之后我们也是要执行 add dataset,来添加一个链接数据库的语句,因为这是个饼状图,所以要用group by 全部放入右边的框架点完成接下来,就是要创建饼状图,就要点击窗口 ...
pythonplt制作饼状图_4.5Python数据处理篇之Matplotlib系列(五)---plt.pie()饼状图
目录 [TOC] 前言饼状图需要导入的是: plt.pie(x, labels= ) (一)简单的饼状图 (1)说明: pyplot.``pie(x, explode=None, labels=No ...
springboot+mybatisplus+thymeleaf导入导出excel表格和制作饼状图，柱状图
这是我们的项目结构. 我们导入的依赖. application.yml配置文件. goods实体类 type实体类 1.导出前端代码: JavaScript代码: 通过这里跳转到后端导出的工具 ...
python制作饼状图
源代码如下: import matplotlib.pyplot as pltplt.rcParams['font.sans-serif']='SimHei'#设置中文显示 plt.figure(f ...
用python制作饼状图
输入代码 import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['simHei'] labels=['教师','辅导员',' ...
python制作饼状图，全国985_211高校比例图
全国985_211高校比例一览表 cites_or_provinces = ['北京市', '安徽省', '四川省', '福建省', '甘肃省','广东省', '河北省', '山西省', '辽宁省', ...

最新文章

热门文章