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. python怎样在一行中捕获多个异常

    所属网站分类: python基础 > 异常处理 作者:浮沉 链接:http://www.pythonheidong.com/blog/article/71/ 来源:python黑洞网,专注pyt ...

  2. screen虚拟终端

    screen命令相当于后台执行(虚拟终端) 用法:在一些要执行很久的操作,比如我有个文件有10个G,要传输一天左右,你如果是直接传输,万一你的连接断了.是不是意味着你的操作白费的呢,这时我们可以打开一 ...

  3. shell-004:检测机器存活或者网络陡动情况!

    如下图情况,我们监测的就是此数据,当大于50%了,我们就可以设置告警等! #!/bin/bash # 用ping检测一台机器的存活或者网络波动情况 # 检测机器的丢包率来检测网络波动情况!! n=`p ...

  4. 如何在Qt Creator 创建一个.pri文件

    如何在Qt Creator 创建一个.pri文件 2013年10月09日 ⁄ 综合 ⁄ 共 254字 ⁄ 字号 小 中 大 ⁄ 评论关闭   这个问题很少人写,因为比较简单,但是让却让我花了好大功夫才 ...

  5. Qt 学习之路 2(48):QSortFilterProxyModel

    Qt 学习之路 2(48):QSortFilterProxyModel 豆子 2013年4月11日 Qt 学习之路 2 6条评论 从本章开始,我们将逐步了解有关自定义模型的相关内容.尽管前面我们曾经介 ...

  6. 简单易懂的VS-CODE C++环境配置(ACM向)

    网上教程比较繁琐,他们似乎要把vs-code变得无所不能,而我只是想代替dev进行简单的输入输出 所以大概花了1个多小时找到了能用的方法(中途还搞了个ubuntu子系统发现没啥用) 这里随便说下 1. ...

  7. Win10安装MySQL5.7.22解压缩版的方法及手动配置讲解

    1.先去MYSQL官网下载安装包,解压放到C盘 2.新建一个my.ini文件放到bin文件夹下面,内容如下,路径对应自己的安装目录: [mysql] # 设置mysql客户端默认字符集 default ...

  8. [转] CSS 颜色名

    [From] http://www.w3school.com.cn/cssref/css_colornames.asp CSS 颜色名 所有浏览器都支持的颜色名. HTML 和 CSS 颜色规范中定义 ...

  9. cmd命令行编译c/c++程序

    一.打开文件夹(文件夹名字为123,文件夹里面有程序345.cpp) cd 123 二.在cmd里面编译程序 1.cd Desktop      //在打开文件夹之前不回到桌面会出错 2.cd 123 ...

  10. vue 修饰符(转载)

    大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...