Highcharts - Pie Chart
1. 饼状图(Pie Chart)示例:
<div id="container" style="height: 400px"></div>
<script type="http://.....jquery-1.9.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: 'lightgrey',
plotBorderWidth: 2,
plotShadow: true
},
title: {
text: 'Pie chart'
},
colors: ['#7cb5ec','#434348','#90ed7d', 'grey'],
credits: {
text: 'Designed by IT Dept.'
},
tooltip: {
pointFormat: '{point.name}:<b>{point.y}</b>',
headerFormat: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
},
series: [{
name: 'Sales',
data: [['A',29.9], ['B',71.5], ['C',106.4], ['D',129.2]]
}]
});
});
</script>
效果:
2. 对于饼状图(Pie Chart),由于数据格式的特殊性,在tooltip中可以使用{point.name}来获取数据的Key值,使用{point.y}来获取数据的Value值;
饼状图(Pie Chart)的数据格式:
series: [{
name: 'Sales',
data: [['A',29.9], ['B',71.5], ['C',106.4], ['D',129.2]]
}]
获取Json格式数据的Key和Value:
tooltip: {
pointFormat: '{point.name}:<b>{point.y}</b>',
headerFormat: ''
},
效果图:
2. 在饼状图的toolTip中,point.key在headerFormat中可以显示为Key值,但在pointFormat中显示为该key的序号(从0开始);
3.
Highcharts - Pie Chart的更多相关文章
- 微软BI 之SSRS 系列 - 解决Pie Chart 中控制标签外部显示与标签重叠的问题
当 Pie Chart 页面标签过多的时候,往往数字标签内容挤做一团.我们要做的是:第一,让标签在饼图外部显示:第二,不让标签重叠. 一种做法是通过修改数字标签属性 - Series Label Pr ...
- c# 通过.net自带的chart控件绘制饼图pie chart
c# 通过.net自带的chart控件绘制饼图pie chart 需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 具体的实现步骤: > ...
- Iocomp控件教程之Pie Chart——饼状图控件
Pie Chart--饼状图控件(Pie Chart)以饼状图形式显示每一个项目内容所占的百分比比重.在设计时.能够使用属性编辑器加入或者移除项目以及更改属性值.在执行时.使用AddItem,Remo ...
- Relative-Frequency|frequency|pie chart |bar chart
2.2Organizing Qualitative Data The number of times a particular distinct value occurs is called its ...
- bubble chart|Matrix Scatter|Overlay Scatter|Scatterplots|drop-line|box plot|Stem-and-leaf plot|Histogram|Bar chart|Pareto chart|Pie chart|doughnut chart|
应用统计学 对类别数据要分类处理: Bar chart复式条形图便于对比: Pareto chart:对类别变量依据频数高低排列: Pie chart:饼图用于一个样本,可以区分类别数据 doughn ...
- Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法
一.提示标签重叠解决方法: series: [{ startAngle:90,//添加这个属性,就可以解决 type: 'pie', name: '充值方式' }] 不知道为什么,上述方法不行了.第一 ...
- highcharts 组合chart
/** *制作 复杂的组合型的 charts * *@param [options] 图表的默认配置 *@dependence jQuery.highcharts *@author wch */ fu ...
- Highcharts - Bar Chart & Column Chart
1. 条形图(Bar Chart)需要的数据格式类型如下: ["Luke Skywalker", "Darth Vader", "Yoda" ...
- Matplotlib学习---用matplotlib画饼图/面包圈图(pie chart, donut chart)
我在网上随便找了一组数据,用它来学习画图.大家可以直接把下面的数据复制到excel里,然后用pandas的read_excel命令读取.或者直接在脚本里创建该数据. 饼图: ax.pie(x,labe ...
随机推荐
- JS 对象的三种创建方式
变量 instanceof 类型的名字----->布尔类型,true就是这种类型,false不是这种类型 在当前的对象的方法中,可以使用this关键字代表当前的对象 1.调用系统的构造函数创 ...
- 【贪心】洛谷P1607 [USACO09FEB]庙会班车Fair Shuttle 题解
不是很容易写出正解的贪心问题. 题目描述 Although Farmer John has no problems walking around the fair to collect pri ...
- WebApi接入Swagger
1.新建webApi项目 2.nuget引入 swagger 3.在项目属性里配置输出 xml文件 4.打开SwaggerConfig.cs编辑 protected static string Get ...
- Oracle PL/SQL之GROUP BY GROUPING SETS
[转自] http://blog.csdn.net/t0nsha/article/details/6538838 使用GROUP BY GROUPING SETS相当于把需要GROUP的集合用UNIO ...
- 获取数组中多个相加等于0的一组数字 javascript
//获取数组中两个相加等于0的一对数字,比如[ [ -10, 10 ], [ -5, 5 ] ] var arr=[-5,10,1,-10,3,4,5,9] //对数组进行排序 arr.sort(fu ...
- List<Type> 随机排序
public List<T> GetRandomList<T>(List<T> inputList){ //Copy to a array T[] copyArra ...
- PIE SDK地图平移校正
地图平移校正,当加载两幅空间参考一样的影像,其中一幅影像有点偏移,这时就以另一幅影像为基准将其进行平移校正,然后保存,再次加载就不会出现偏移了. 下面来介绍下实现的主要代码: 首先通过选中目录树中的要 ...
- 红米note_维修_开机键
1. 2.在线人工客服(20180919) 很荣幸为您服务,有什么问题可以帮助到您的- 我的手机 后边的 开机键 貌似 不太行了 您好,您是哪款手机 就是 要按 好几次 很用力 才能 开亮手机屏幕木 ...
- Gradle发布项目到 maven 之novoda/bintray-release(3)
novoda/bintray-release 使用这个插件上传比较简单,只需要两步就可以 1.在项目根目录下的 build.gradle 添加插件依赖 // Top-level build file ...
- nginx 问题总结
1, 403错误 403是很常见的错误代码,一般就是未授权被禁止访问的意思. 可能的原因有两种:Nginx程序用户无权限访问web目录文件Nginx需要访问目录,但是autoindex选项被关闭 修复 ...