html使用highcharts绘制饼图,Highcharts绘制饼图的简单实例

本节内容：

Highcharts 饼图的绘制实例。

>>> 如果您不了解Highcharts为何物，请参考 Highcharts教程中的相关内容。

1、Highcharts制作饼图，效果图如下：

2、对应的JavaScript代码---pie-chart.js如下：

复制代码代码示例:

$(function () {

var chart;

var totalMoney=50000

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'pie_chart',

plotBackgroundColor: 'white',//背景颜色

plotBorderWidth: 0,

plotShadow: false

title: {

text: 'Total:$'+totalMoney,

verticalAlign:'bottom',

y:-60

tooltip: {//鼠标移动到每个饼图显示的内容

pointFormat: '{point.name}: {point.percentage}%',

percentageDecimals: 1,

formatter: function() {

return this.point.name+':$'+totalMoney*this.point.percentage/100;

} // www.jquerycn.cn

plotOptions: {

pie: {

size:'60%',

borderWidth: 0,

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

color: '#000',

distance: -50,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠

style: {

fontSize: '10px',

lineHeight: '10px'

formatter: function(index) {

return '' + this.point.name + '';

}

padding:20

}

series: [{//设置每小个饼图的颜色、名称、百分比

type: 'pie',

name: null,

data: [

{name:'Base salary',color:'#3DA9FF',y:65},

{name:'Health insurance',color:'#008FE0',y:20},

{name:'Company matched',color:'#00639B',y:10},

{name:'Others',color:'#CBECFF',y:5}

]

}]

});

html使用highcharts绘制饼图,Highcharts绘制饼图的简单实例相关推荐

在线作图丨如何绘制精美的3D饼图
Question 1:什么是饼图? 饼图(pie chart)是常用的基本统计图形之一,可以直观地展示整体与个体之间的比较情况.在生信分析中,饼图常用于展示各元素数值相对于总数的占比情况,图中每个扇 ...
Matlab实用程序--图形应用-饼图的绘制
饼图的绘制 function shili09h0=figure('toolbar','none',... 'position',[200 150 450 250],... 'name','实例09') ...
QT绘制饼图和自定义饼图切片
QT绘制饼图和自定义饼图切片项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介创建一个简单的饼图以及如何对饼图切片进行一些自定义. 项目技术 qt5.12,qt ch ...
html可视化布局工具_简介一些蜘蛛布局标签的饼图的绘制方法
简介一些蜘蛛布局标签的饼图的绘制方法mp.weixin.qq.com 简介一些蜘蛛布局标签的饼图的绘制方法 N个月前摸索了这种饼图的绘制方法.就是元素比较多,不显示标签的话仅靠图例的颜色标注就会很难 ...
Highcharts使用表格数据绘制图表
Highcharts使用表格数据绘制图表在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...
html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
【OpenGL】十一、OpenGL 绘制多个点 ( 绘制单个点 | 绘制多个点 )
文章目录一.绘制单个点二.绘制多个点三.相关资源在上一篇博客 [OpenGL]十.OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | ...
Highcharts JS去除Highcharts.com链接的方法
1.Highcharts JS去除Highcharts.com链接的方法在js文件中找到Credits,然后把enable的属性从!0改为0. 也可以更改为自己需要的: enabled:设置是否显示 ...
python樱花代码_使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
今天为大家介绍几个Python"装逼"实例代码,python绘制樱花.玫瑰.圣诞树代码实例,主要使用了turtle库 Python绘制樱花代码实例动态生成樱花效果图(这个是动态 ...
OPenGL实例化绘制、普通绘制说明
OpenGL 实例化(Instancing)是一种只调用一次渲染函数就能绘制出不少物体的技术,能够实现将数据一次性而不是多次发送给 GPU ,告诉 OpenGL使用一个绘制函数,将这些数据绘制成多个物 ...

html使用highcharts绘制饼图,Highcharts绘制饼图的简单实例

html使用highcharts绘制饼图,Highcharts绘制饼图的简单实例相关推荐

最新文章

热门文章