highChart表图大全之饼图&圆环图详解

最新推荐文章于 2024-10-16 20:34:40 发布

CLFuture

最新推荐文章于 2024-10-16 20:34:40 发布

阅读量2.7k

点赞数 2

分类专栏： HighChart 文章标签： HighChart饼图

本文链接：https://blog.csdn.net/m0_37510446/article/details/102586094

版权

HighChart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一前言

最近在工作上，遇到了关于表图的需求，于是在任务完成之后在这里写篇博客记录一下

二基本饼图

代码：

<html>
<head>
<meta charset="UTF-8" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
	   type: 'pie',
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var title = {
      text: '自信的人与不自信人的成功率',   
	  style:{
		   fontSize:"18px",
		   fontWeight:"bold",
		   color:"blue"
	   }
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',//point.name 该数据点名称，point.percentage：该数据点所占的百分比
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
         }
      }
   };
   var series= [{
      name: 'Browser share',
      data: [{
            name: '自信',
            y: 90.0,
            sliced: true,
            selected: true
         },
         ["不自信",10]
      ]
   }];     
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

效果：
在这里插入图片描述
代码关键属性解析：
主要的关键字段有
char 表
tittle 标题
tooltip 提示工具（用来配置提示信息）
plotOptions 数据点的配置，（用来配置图表中的数据点相关属性）
series 数据列配置（用于设置图表中要展示数据相关的属性）
var chart中的type属性：用来规定该图表的类型，常用的其他类型还有‘column’柱形，split曲线型等

tittle: {//标题
text: 标题内容
style:{ 标题格式
fontSize:字体大小
fontWeight:字体粗细属性
color:字体颜色
}
tooltip //提示工具
pointFormat //当我们的数据滑到对应数据区域时的提示信息，内容支持html

plotOptions //设置图表数据点的相关配置信息
pie:{//配置饼图的数据点信息
allow Point Select：true //允许选中数据点,此处若设置为false，那么我们就不能通过点击鼠标来选中对应的数据区域
cursor:‘point’，//设置鼠标的形状
dataLabels:{//数据标签，如上图中区域图的分支
在这里插入图片描述
enabled://是否可见
format:提示内容，使用{}将属性筛选，若不加{}，poing.name就不能被识别为一个变量，会被识别为一个字符串：

style:{
color://数据标签的颜色
}
}

series 数据列配置（用于设置图表中要展示数据相关的属性）
series.name:数据序列的名称
data
data.name:数据点的名称
data.sliced:扇区的分离距离大小
data.selected//默认被选中

三圆环图

在实际工作中，可能会遇到需要使用圆环图的需求，如下：
在这里插入图片描述
其实很简单，我们只需要一步，就可以使实心圆环变成空心圆环
在数据点配置项：plot Point中加入innerSize关键字即可

  pie: {
		 innerSize:'60%',
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '{point.name}: {point.percentage:.1f} %',
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
         }
      }
   };

在这里插入图片描述