Highcharts 半圈圆环图

一代码

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 半圈圆环图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://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 = {plotBackgroundColor: null,plotBorderWidth: 0,plotShadow: false};// 标题var title = {text: '浏览器份额',align: 'center',verticalAlign: 'middle',y: 50};// 提示var tooltip = {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'};var plotOptions = {pie: {dataLabels: {enabled: true,distance: -50,style: {fontWeight: 'bold',color: 'white',textShadow: '0px 1px 2px black'}},startAngle: -90,   //开始角度endAngle: 90,      //结束角度center: ['50%', '75%']}};var series= [{//饼图type: 'pie',name: 'Browser share',// 控制环的尺寸innerSize: '50%',// 数据data: [['Firefox',   45.0],['IE',       26.8],['Chrome', 12.8],['Safari',    8.5],['Opera',     6.2],{name: 'Others',y: 0.7,dataLabels: {enabled: false}}]}];var json = {};json.chart = chart;json.title = title;json.tooltip = tooltip;json.series = series;json.plotOptions = plotOptions;$('#container').highcharts(json);
});
</script>
</body>
</html>

二运行结果

Highcharts 半圈圆环图相关推荐

Highcharts 3D圆环图
一代码 <html> <head> <meta charset="UTF-8" /> <title>Highcharts 3D圆环 ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
Matplotlib 绘制圆环图的两种方法！
作者 | 快快来源 | 快学Python 人生苦短,快学Python!今天给大家介绍Python可视化之环形图的绘制. 环形图,也被称为圆环图.它在功能上与饼图相同,只是中间有一个空白,并且能够同时 ...
【Echarts】echarts饼图、圆环图配置代码详解
前言简介:本文将从头开始,带你快速上手 echarts最常用图例-饼图准备:请自行先将echarts图例引入你的项目,本文不多介绍.(引入 echarts教程:http://t.csdn.cn/m ...
highChart表图大全之饼图圆环图详解
一前言最近在工作上,遇到了关于表图的需求,于是在任务完成之后在这里写篇博客记录一下二基本饼图代码: <html> <head> <meta charset=&q ...
[python] 基于matplotlib实现圆环图的绘制
圆环图本质上是一个中间切出一块区域的饼状图.可以使用python和matplotlib库来实现.本文主要介绍基于matplotlib实现圆环图.本文所有代码见:Python-Study-Notes # ...
使用饼图_常见图表规范：直方图、圆环图和饼图
前面已经介绍了柱形图.条形图的规范和适用场景,本期主要介绍直方图.圆环图和饼图的. 为方便大家随时查阅推文中的资料,关键信息我都会以图片的形式提炼,有需要者可以将图片直接保存至手机~没错,还是一贯的贴 ...
Tableau系列之圆环图制作
Tableau作为一款优秀的数据可视化工具,越来越多的人开始使用他来开发报表,最近项目中刚好有用到Tableau,因此趁热打铁写两篇文章简单记录一下步骤,方便日后查阅,本文记录圆环图的制作步骤. 1. ...
笔记——数据可视化03（饼图、圆环图、箱线图、棉棒图、误差图、子图）
导入模块 plt.pie() x :(每一块)的比例,如果sum(x) > 1会使用sum(x)归一化: labels:(每一块)饼图外侧显示的说明文字: explode:(每一块)离开中心距离 ...

Highcharts 半圈圆环图

Highcharts 半圈圆环图相关推荐

最新文章

热门文章