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的更多相关文章

  1. 微软BI 之SSRS 系列 - 解决Pie Chart 中控制标签外部显示与标签重叠的问题

    当 Pie Chart 页面标签过多的时候,往往数字标签内容挤做一团.我们要做的是:第一,让标签在饼图外部显示:第二,不让标签重叠. 一种做法是通过修改数字标签属性 - Series Label Pr ...

  2. c# 通过.net自带的chart控件绘制饼图pie chart

    c# 通过.net自带的chart控件绘制饼图pie chart   需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 具体的实现步骤: > ...

  3. Iocomp控件教程之Pie Chart——饼状图控件

    Pie Chart--饼状图控件(Pie Chart)以饼状图形式显示每一个项目内容所占的百分比比重.在设计时.能够使用属性编辑器加入或者移除项目以及更改属性值.在执行时.使用AddItem,Remo ...

  4. Relative-Frequency|frequency|pie chart |bar chart

    2.2Organizing Qualitative Data The number of times a particular distinct value occurs is called its ...

  5. 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 ...

  6. Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法

    一.提示标签重叠解决方法: series: [{ startAngle:90,//添加这个属性,就可以解决 type: 'pie', name: '充值方式' }] 不知道为什么,上述方法不行了.第一 ...

  7. highcharts 组合chart

    /** *制作 复杂的组合型的 charts * *@param [options] 图表的默认配置 *@dependence jQuery.highcharts *@author wch */ fu ...

  8. Highcharts - Bar Chart & Column Chart

    1. 条形图(Bar Chart)需要的数据格式类型如下: ["Luke Skywalker", "Darth Vader", "Yoda" ...

  9. Matplotlib学习---用matplotlib画饼图/面包圈图(pie chart, donut chart)

    我在网上随便找了一组数据,用它来学习画图.大家可以直接把下面的数据复制到excel里,然后用pandas的read_excel命令读取.或者直接在脚本里创建该数据. 饼图: ax.pie(x,labe ...

随机推荐

  1. JS 对象的三种创建方式

    变量 instanceof 类型的名字----->布尔类型,true就是这种类型,false不是这种类型 在当前的对象的方法中,可以使用this关键字代表当前的对象   1.调用系统的构造函数创 ...

  2. 【贪心】洛谷P1607 [USACO09FEB]庙会班车Fair Shuttle 题解

        不是很容易写出正解的贪心问题. 题目描述 Although Farmer John has no problems walking around the fair to collect pri ...

  3. WebApi接入Swagger

    1.新建webApi项目 2.nuget引入 swagger 3.在项目属性里配置输出 xml文件 4.打开SwaggerConfig.cs编辑 protected static string Get ...

  4. Oracle PL/SQL之GROUP BY GROUPING SETS

    [转自] http://blog.csdn.net/t0nsha/article/details/6538838 使用GROUP BY GROUPING SETS相当于把需要GROUP的集合用UNIO ...

  5. 获取数组中多个相加等于0的一组数字 javascript

    //获取数组中两个相加等于0的一对数字,比如[ [ -10, 10 ], [ -5, 5 ] ] var arr=[-5,10,1,-10,3,4,5,9] //对数组进行排序 arr.sort(fu ...

  6. List<Type> 随机排序

    public List<T> GetRandomList<T>(List<T> inputList){ //Copy to a array T[] copyArra ...

  7. PIE SDK地图平移校正

    地图平移校正,当加载两幅空间参考一样的影像,其中一幅影像有点偏移,这时就以另一幅影像为基准将其进行平移校正,然后保存,再次加载就不会出现偏移了. 下面来介绍下实现的主要代码: 首先通过选中目录树中的要 ...

  8. 红米note_维修_开机键

    1. 2.在线人工客服(20180919) 很荣幸为您服务,有什么问题可以帮助到您的- 我的手机 后边的 开机键 貌似 不太行了 您好,您是哪款手机 就是 要按 好几次 很用力 才能 开亮手机屏幕木 ...

  9. Gradle发布项目到 maven 之novoda/bintray-release(3)

    novoda/bintray-release 使用这个插件上传比较简单,只需要两步就可以 1.在项目根目录下的 build.gradle 添加插件依赖 // Top-level build file ...

  10. nginx 问题总结

    1, 403错误 403是很常见的错误代码,一般就是未授权被禁止访问的意思. 可能的原因有两种:Nginx程序用户无权限访问web目录文件Nginx需要访问目录,但是autoindex选项被关闭 修复 ...