HighCharts之2D半圆环图

最新推荐文章于 2024-02-01 16:39:56 发布
最新推荐文章于 2024-02-01 16:39:56 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： HighCharts HTML JQuery 文章标签： HighCharts jquery 半圆环图 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/you23hai45/article/details/22445385
版权
JQuery 同时被 3 个专栏收录
222 篇文章 2 订阅
订阅专栏
HTML
131 篇文章 0 订阅
订阅专栏
HighCharts
29 篇文章 0 订阅
订阅专栏

HighCharts之2D半圆环图


1、实例源码

HalfDonut.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D半圆环图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
     $(function(){
    	 $('#halfDonutChart').highcharts({
    	        chart: {
    	            plotBackgroundColor: '#878788',
    	            plotBorderWidth: '50px',
    	            plotShadow: true
    	        },
    	        title: {
    	            text: '2014年3月第一周人数分布情况',
    	            align: 'center',
    	            verticalAlign: 'middle',
    	            y: 100
    	        },
    	        tooltip: {
    	            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    	        },
    	        plotOptions: {
    	            pie: {
    	                dataLabels: {
    	                    enabled: true,
    	                    distance: -80,
    	                    style: {
    	                        fontWeight: 'bold',
    	                        fontSize: '16px',
    	                        color: 'white',
    	                        textShadow: '0px 1px 2px black'
    	                    }
    	                },
    	                startAngle: -90,
    	                endAngle: 90,
    	                center: ['50%', '75%']
    	            }
    	        },
    	        series: [{
    	            type: 'pie',
    	            name: '人数比例',
    	            innerSize: '50%',
    	            data: [
    	                ['星期一', 878454],
    	                ['星期二', 542155],
    	                ['星期三', 415542],
    	                ['星期四', 651212],
    	                ['星期五', 874545],
    	                ['星期六', 326566],
    	                ['星期日', 984545]
    	            ]
    	        }]
    	    });
     });
</script>
</head>
<body>
   <div id="halfDonutChart" style="width: 1250px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、实例结果


翱翔天地
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件HighCharts绘制2D半圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制半圆环图形的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
Highcharts 圆形进度条式测量图
实践求真知
01-04 945
一 代码 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Highcharts 圆形进度条式测量图&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&a
echarts + gauge + 半圆效果
weixin_44384273的博客
01-26 465
请注意以下配置需要echarts 5.0.0以上版本，4是不行的。
Highcharts 测量图；Highcharts 圆形进度条式测量图；Highcharts 时钟；Highcharts 双轴车速表；Highcharts 音量表（VU Meter）...
weixin_30312557的博客
11-28 180
Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' 。chart.type 描述了图表类型。默认值为 "line"。 var chart = { type: 'guage' }; pane 配置 pane 只适用在极坐标图和角度测量仪。...
Highcharts 半圈圆环图
实践求真知
12-21 1258
一 代码 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Highcharts 半圈圆环图&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&l
highcharts环形图
宇智波班的博客
10-15 2181
highcharts画嵌套环形图 总结：看官方文档找配置项，首先确定你找的是那部分 1图例（legend）部分 2数据配置列（serise） 3数据提示信息（tooltip）也就是鼠标经过时显示的数据 注意：以上板块都是直接在主配置下找 想要的效果： 先贴代码 html如下： <div id="number_of_projects" style="width:100%;min-width:300px;height:calc(100% - 68px)"> </div>
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件HighCharts绘制2D圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制圆环图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
【案例+解说】highcharts 3D环形图动态循环
最新发布
~牧马~
02-01 425
serse加innerSize，只需加这一项就可以将3D饼图直接变成3D环形图。
vue+highcharts实现3d环形图
weixin_44727080的博客
11-02 2161
前言： vue+highcharts实现3d饼图 效果图： 实现步骤： 1、安装 highcharts npm install highcharts --save 2、js部分： import Highcharts from 'highcharts/highstock' data里面： options: { chart: { type: 'pie', options3d: ...
半圆环分析图示.pptx
09-26
半圆环分析图示.pptx,PPTfans_0371
Excel饼图圆环图模板-人员业绩分析表Excel图表
11-24
Excel饼图圆环图模板-人员业绩分析表Excel图表
html，css实现各式各样的炫酷图表，折线图，柱形图（2D、3D）饼图.....
01-29
该文件涵盖了各式各样的图文报表，里面的各种图表通过下拉框选择切换，非常强大，用于各行业，cms、数学统计、数据处理...界面简洁清晰，代码通俗易用。。。
Excel饼图圆环图模板-各部门人员统计报告Excel图表
11-24
Excel饼图圆环图模板-各部门人员统计报告Excel图表
HighCharts实现3D不同高度圆环图、3D饼图
热门推荐
m0_51431448的博客
04-04 1万+
最近做可视化比较多，就常用的图表类型做了一下总结。 因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。 这里都是用的vue3，其实和vue2差不多，在写法上稍作修改即可 第一步首先安装 highcharts npm install highcharts --save 第二步 main.js 引入 3d相关 import highcharts from 'hi..
数据可视化【highchart】—— 环形图
做技术，坚持才是最重要的，一时的热情只是暂时的进步
01-15 1271
基本案例 基于案例修改后效果图如下： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-s
Highcharts 圆环图
实践求真知
12-19 1177
一 代码 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Highcharts 圆环图&lt;/title&gt; &lt;script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&lt
echarts 半圓形扇形
sunny_day的博客
03-27 2846
// 半圓扇形 setCleverRateChart: function (a) { let dataType= ["男", "女", "中","男1", "女1", "中1"]; let aa=0; for(let i=0;i<a.length;i++){ aa+=a[i]; } // 基于准备好的dom，初始化echarts实例 var myChart...
highcharts柱状图
09-13
你想了解关于 Highcharts 的柱状图吗？Highcharts 是一种基于 JavaScript 的图表库，可以用于创建各种类型的交互式图表，包括柱状图。 使用 Highcharts 创建柱状图相对简单。首先，你需要引入 Highcharts 库的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值