JavaScript实现的环形图比较

最新推荐文章于 2023-12-07 10:48:25 发布
最新推荐文章于 2023-12-07 10:48:25 发布
阅读量1w 收藏 9
点赞数 1
分类专栏： 前端低代码 文章标签： javascript 图表 环形图 highCharts ichartjs
本文为博主（xunming）原创文章，转载请注明出处。
本文链接：https://blog.csdn.net/diyangxia/article/details/69254769
版权

1，Highcharts

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

主要优势：兼容性、开源、纯 JavaScript、丰富的图表类型、简单的配置语法、动态交互性、支持多坐标轴等等。

    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: diyangxia
  Date: 2017/4/12
  Time: 15:51
  To 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})
    @ResponseBody
    public 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，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

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

以下是官方实例

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

xun-ming
关注
专栏目录
JavaScript实现环形图echarts
EBYB的博客
03-23 1467
echarts.js下载链接提取码：qj3ghttps://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw 根据以下数据实现环形图 环形图数据 入会方式 数量 自愿 5 微信推广 2 团购促销 3 节日活动 4 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src=
Chart.js 环形图
最新发布
lly202406的博客
07-24 304
Chart.js 提供了丰富的配置选项，允许开发者自定义环形图的各个方面，包括颜色、字体、动画等。标题：通过设置图表的标题。图例：通过设置图例的位置和样式。颜色：通过设置每个扇形区域的颜色。动画：通过设置图表的动画效果。字体：通过和设置字体样式。
使用Echarts.js绘制环形图（指定触发高亮事件）
weixin_45092437的博客
12-07 1243
1、tab选中不限时，环形图表中正常渲染环形图，以及对应的数据类型图例和指示文字。2、环形图hover时，高亮hover所在的图形区域，图形区域放大，并悬浮弹窗展示相关数据。3、在切换tab时，选中指定tab，则环形图中的对应数据图形进行高亮显示，图形区域放大，指示文字和指示线加粗处理。其余数据图形区域透明度降低处理。4、指定图形标题和图形区域颜色。5、设置图形最小占有区域。
js嵌套环形图插件echarts
ICode联盟
07-23 139
js嵌套环形图插件，echarts.js统计图表插件例子嵌套环形图访客来源分析。
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图实例
06-22
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图，很实用，html页面打开就能看效果，在example文件夹下，原网页是 https://github.com/chartjs/Chart.js可自行下载
JS 饼图/环形图表
热门推荐
qiaofengma的博客
07-28 1万+
js 圆形/环形图表 最近公司项目要求开发环形图表客户端（Android/IOS）组件，一开始想使用原生实现，但是需要开发2套代码，最后决定使用js来实现图表，原生调用html代码展示。 效果如下： 直接上代码：html代码：<html> <head> <meta name="viewport" content="width=device-width, initial-scal
echart 3D环形图 动画效果
12-18
在ECharts中，我们可以通过`series`中的`type`属性设置为`pie`或`funnel`（漏斗图）来创建环形图，然后通过调整相关的配置项实现3D效果。 首先，我们需要在HTML文件中引入ECharts的库文件，例如`zhuan.html`可能...
图片环形3d效果
08-30
5. **WebGL**：在网页端实现3D效果，WebGL是一种基于OpenGL标准的JavaScript API，允许在浏览器中直接渲染3D图形，无需插件支持。 6. **CSS3 3D转换**：对于简单的环形3D效果，也可以利用CSS3的3D转换属性，如`...
HTML+CSS+JavaScript实现轮播图
weixin_43396749的博客
11-24 2835
HTML+CSS+JavaScript实现轮播图
javascript 实现的 图片旋转功能
01-30
JavaScript是一种广泛应用于...综上，JavaScript实现的图片旋转功能涉及了HTML5 Canvas技术、图形变换、事件处理、性能优化等多个方面，通过这些技术可以创建出用户友好的图片旋转工具，满足用户在上传图片时的需求。
环形链表
qq_41266084的博客
09-20 1285
环形链表 给定一个链表，判断链表中是否有环。 如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。 为了表示给定链表中的环，我们使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。 如果 pos 是 -1，则在该链表中没有环。注意：pos 不作为参数进行传递，仅仅是为了标识链表的实际情况。 如果链表中存在环，则返回 true 。 否则，返回 false 。 解答： class Solution { public: bool hasCycle(ListNo
JS做的环形倒计时
01-28
JS做的环形倒计时，界面酷炫，可以用与付款、比赛等场合
JS+CSS3 3D立体环形百分比进度条图表动画特效
06-11
一款基于JS+CSS3 3D立体环形百分比进度条图表动画特效，3D立体外观视觉效果非常好看，圆心显示百分比数据，一目了然。
原生js实现圆环图
weixin_56008510的博客
10-20 264
【代码】原生js实现圆环图。
d3.js环形统计图代码
czboy
06-10 1704
(function(){ module.exports = function(weekNormal,weekHeight,weekLow,monthNormal,monthHeight,monthLow){ //周 var weekNormaldataset = []; var weekHeightdataset = []; ...
THREEJS实现立体环图(思路版)
qq_35438952的博客
04-19 1306
使用Threejs实现立体柱形图的思路版本，含有代码
141. 环形链表（JS实现）
qq_43284411的博客
11-12 539
141. 环形链表（JS实现）
JS绘制圆环
weixin_34166472的博客
03-29 1482
引用： https://www.cnblogs.com/dom-liu/p/6004375.html作者原创的和下面修改的刚好左右相反。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS圆环绘制</title> ...
echarts实现多重环形图
09-28
实现多重环形图的方法可以使用Echarts中的Polar（极坐标）和Bar（柱状图）来实现。在Echarts中，可以通过设置多个系列来创建多重环形图。每个系列代表一个环，通过设置各个环的半径、角度和颜色等属性，可以实现多重环形图的效果。 首先，需要引入Echarts库，然后创建一个容器来承载图表。接着，通过配置项来设置图表的样式和数据，其中包括设置多个系列的属性。例如，设置各个环的半径、角度、颜色和数据等。 下面是一个示例代码，展示了如何使用Echarts实现多重环形图： ```javascript // 引入Echarts库 import echarts from 'echarts'; // 创建容器 const chartContainer = document.getElementById('chart-container'); // 初始化图表 const chart = echarts.init(chartContainer); // 配置项 const option = { // 设置图表类型为极坐标 polar: {}, // 设置多个系列，每个系列代表一个环 series: [ { type: 'bar', data: [/* 数据 */], // 设置第一个环的半径和角度 radius: ['0%', '30%'], angle: [0, 360], // 设置第一个环的颜色和样式 itemStyle: { color: 'blue', }, }, { type: 'bar', data: [/* 数据 */], // 设置第二个环的半径和角度 radius: ['30%', '60%'], angle: [0, 360], // 设置第二个环的颜色和样式 itemStyle: { color: 'green', }, }, // 可以继续添加更多的系列 ], }; // 使用配置项生成图表 chart.setOption(option); ``` 使用上述代码，你可以根据自己的需求设置每个环的半径、角度、颜色和数据等属性，从而实现多重环形图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值