    var chart = null;$(function () {$('#container').highcharts({chart: {borderColor: '#E5E8EB',//图表框颜色borderWidth: 1,//图表框宽度backgroundColor: '#F6F6F6',//图表背景色plotBackgroundColor: null,//绘图区无颜色plotBorderWidth: null,//绘图区边框宽度plotShadow: false,//绘图区阴影效果spacing: [100, 20, 100, 20]//图表内边距，上右下左},colors: ['#EFE07C', '#89B5EB', '#F8AA9E', '#FFC7B8', '#F18686', '#EFC27C'],// colors是饼图或者环形图中每一块的颜色credits: {enabled: false//右下角的版权信息不显示},title: {floating: true,text: '<div style="text-align:center" ><img src="http://liuxunming.com/image/avatar.png" width="20px" height="20px" style="vertical-align: middle"/></div>个人简介',//环形图中心显示文字加图片useHTML: true,//必须设置true才能加图片},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'},//浮动的数据提示框plotOptions: {pie: {size:200,//环形图大小控制allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.2f} %'}}},series: [{type: 'pie',innerSize: '70%',// 圆环厚度百分比name: '占比',//浮动框的文字提示showInLegend: true,//显示图例data: [['Firefox', 45.0],['IE', 26.8],['Opera', 6.2],['Opera2', 16.2],['Opera3', 36.2],]}],legend: {layout: 'horizontal',//图例水平排放，超过宽度后换行labelFormat: '{name} {percentage:.2f} %',symbolHeight: 8,//图例小标志高度symbolWidth: 8,width: 220,//图例区宽度align: 'center',symbolRadius: 0// 图例形状为方形},}, function (c) {// 环形图圆心var centerY = c.series[0].center[1],titleHeight = parseInt(c.title.styles.fontSize);c.setTitle({y: centerY + titleHeight / 2});chart = c;});});

以上代码效果如下：

具体可以到highchart官网的图表编辑区直接粘贴以上代码试试效果，直接替换js内容即可。顺便稍微改一下界面的div大小

<div id="container" style="width:500px;height:600px"></div>

环形图中心的文字加图片如何整体居中

2，iChartJS

ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。

<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--Created by IntelliJ IDEA.User: diyangxiaDate: 2017/4/12Time: 15:51To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();
%>
<html>
<head><title>饼状图显示</title><script type="text/javascript" src="<%=path%>/staticmedia/js/jquery/jquery.1.4.2-min.js"></script><script src="http://www.ichartjs.com/ichart.latest.min.js"></script><script type="text/javascript">var path = "<%=path%>";appendContents();function appendContents() {$.ajax({type: "POST",url: path + "/queryChartList.json",data: {},beforeSend:function(xhr){},error: function () {alert("出错了");},success: function (data) {var list = data.records;var title = data.title;var totalCount = data.totalCount;$.each(list, function () {var chart = iChart.create({render:"ichart-render",width:800,height:400,background_color:"#fefefe",gradient:false,color_factor:0.2,border:{color:"BCBCBC",width:1},align:"center",offsetx:0,offsety:0,sub_option:{mini_label_threshold_angle : 70,//迷你label的阀值,单位:角度mini_label:{//迷你label配置项fontsize:20,fontweight:600,color : '#ffffff'},border:{color:"#BCBCBC",width:1},label:{sign:false,//设置禁用label的小图标fontweight:600,padding:'0 4',fontsize:11,color:"#4572a7",border:{color:"#BCBCBC",enable:false},background_color:null},listeners:{parseText:function(d, t){return d.get('value')+"%";//自定义label文本}}},shadow:true,shadow_color:"#666666",shadow_blur:2,showpercent:false,column_width:"70%",bar_height:"70%",radius:"90%",title:{text:title,color:"#111111",fontsize:20,font:"微软雅黑",textAlign:"center",height:30,offsetx:0,offsety:0},subtitle:{text:"子标题"+title,color:"#111111",fontsize:16,font:"微软雅黑",textAlign:"center",height:20,offsetx:0,offsety:0},footnote:{text:"脚标题"+title,color:"#111111",fontsize:12,font:"微软雅黑",textAlign:"right",height:20,offsetx:0,offsety:0},legend:{enable:true,background_color:"#fefefe",color:"#333333",fontsize:12,border:{color:"#BCBCBC",width:1},column:1,row:1,align:"right",valign:"center",offsetx:0,offsety:0},coordinate:{width:"80%",height:"84%",background_color:"#ffffff",axis:{color:"#a5acb8",width:[1,"",1,""]},grid_color:"#d9d9d9",label:{fontweight:500,color:"#666666",fontsize:11}},label:{fontweight:500,color:"#666666",fontsize:11},type:"pie2d",data:list});chart.draw();});},complete:function(xhr){//隐藏div}});}</script>
</head>
<body style="background-color:#244c74;">
<div id="ichart-render"></div>
</body>
</html>

查询列表的接口

 /*** 查询表数据** @param request* @return*/@RequestMapping(value = "/queryChartList", method = {POST})@ResponseBodypublic JsonVOArray<ChartData> queryChartList(HttpServletRequest request) {LOGGER.info("welcome queryChartList!");JsonVOArray<ChartData> vo = new JsonVOArray<ChartData>();vo.setSuccess(false);List<ChartData> list = friendService.queryChartData();vo.setRecords(list);vo.setTitle("饼状图表标题样例");vo.setTotalCount(list.size());return vo;}

实体类

public class ChartData{String name;int value;String color;public String getName() {return name;}public void setName(String name) {this.name = name;}public int getValue() {return value;}public void setValue(int value) {this.value = value;}public String getColor() {return color;}public void setColor(String color) {this.color = color;}
}

表的数据：

华为   18  #4572a7
小米  12  #aa4643
苹果  45  #89a54e
长春  10  #854123
订单  15  #dd4123
name value color

以下借用ichartjs官网的一个图作为参考。

3，eChart

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

主要优势：丰富的图表类型、多个坐标系的支持、移动端的优化、深度的交互式数据探索、大数据量的展现、多维数据的支持以及丰富的视觉编码手段、动态数据、绚丽的特效。

以下是官方实例

app.title = '环形图';option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '30',fontWeight: 'bold'}}},labelLine: {normal: {show: false}},data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]
};

实际效果如下图：

具体可以到echart官网的图表编辑区在线修改看实际效果。

4,优劣比较

本文仅就环形图作讨论研究，其他图表类型暂不管。

highCharts可定制程度高，图表编辑区操作方便，环形图可以添加中心文字和图标，可以指定环形图每一块的颜色，也是我重点研究的。
ichartjs在线设计器功能比较简单，只能操作部分图表类型，环形图中心可以添加文字，但无法添加图标，可以指定环形图每一块的颜色
echart图表编辑区操作方便，目前看来无法为环形图中心添加文字和图标，api看起来比较难懂，无法指定每块颜色。

个人开发或者非商业用途的开发建议选择highCharts，其次选择eChart或者ichartjs

JavaScript实现的环形图比较相关推荐

JavaScript实现环形图echarts
echarts.js下载链接提取码:qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw 根据以下数据实现环形图环形图数据入会方式数量自愿 5 ...
ECharts 之环形图
上一篇文章写了堆叠柱状图的用法,本文写的是环形图的方法,环形图是饼图的一种,具体的饼图可以自己更改radius属性的大小 radius : ['50%', '70%'], //饼图的半径,第一项是内半 ...
echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy ...
echarts绘制嵌套环形图(南丁格尔玫瑰图)
根据专业总人数和学院总人数绘制嵌套环形图首先,echarts的基本步骤引入js,准备容器,初始化实例, <script src="lib/echarts.min.js"& ...
【echarts】三环环形图，在环形图的每个扇形之间加空隙
代码还有很多的优化空间,主要也就是环形图的几个配置比较重要,毕竟官方文档太长了(难找),还是记录一下. 配置 1. 实现环形图不同区域之间的空隙itemStyle: { normal: { borde ...
highchart实现,有间隔3D环形图
文章目录 @[TOC](文章目录) 一.highchart实现,有间隔3D环形图二.使用步骤 1.代码实现一.highchart实现,有间隔3D环形图二.使用步骤 1.代码实现代码如下(示例) ...
java 饼图框架_Java 在 Excel 中创建饼图/环形图
import com.spire.xls.*;importcom.spire.xls.charts.ChartSerie;importcom.spire.xls.charts.ChartSeries; ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
python怎么画多重饼状图_Python通过matplotlib画双层饼图及环形图简单示例
(1) 饼图(pie),即在一个圆圈内分成几块,显示不同数据系列的占比大小,这也是我们在日常数据的图形展示中最常用的图形之一. 在python中常用matplotlib的pie来绘制,基本命令如下所示 ...

JavaScript实现的环形图比较

1，Highcharts

2，iChartJS

以下借用ichartjs官网的一个图作为参考。

3，eChart

4,优劣比较

JavaScript实现的环形图比较相关推荐

最新文章

热门文章

JavaScript实现的环形图比较

1，Highcharts

2，iChartJS

以下借用ichartjs官网的一个图作为参考。 3，eChart

4,优劣比较

JavaScript实现的环形图比较相关推荐

最新文章

热门文章

以下借用ichartjs官网的一个图作为参考。

3，eChart