1.引用js文件

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

<script src="/global/plugins/highcharts/highcharts.js" type="text/javascript"></script>
<script src="/global/plugins/highcharts/highcharts-3d.js" type="text/javascript"></script>
<!-- <script src="/global/plugins/highcharts/themes/grid.js" type="text/javascript"></script>-->
<script src="/global/plugins/highcharts/modules/exporting.js" type="text/javascript"></script>

2.主体部分

<div id="container" style="min-width:400px;height:400px"></div>

$(function () {

    $(document).ready(function () {

        // Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true
},
title: {
text: '数值显示在图形区域'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -30,
format:'<b>{point.y}</b>', },
showInLegend: true }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
type: 'pie',
name: '占比',
distance: -10,
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
}
]
}]
});
}); });

Highcharts 饼图数值显示在图形上的更多相关文章

  1. HighCharts 在IE8下饼图不显示的问题

    HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报  'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: ...

  2. echarts饼图不显示数据为0的数据

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...

  3. [Unity3D]Unity3D游戏开发之伤害数值显示

    大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.众所周知,在RPG游戏策划中最为重要的一个环节是数值策划.数值策划是一个关于游戏平衡方面的概念 ...

  4. 多个SVG图形集成到一个SVG图形上

    SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...

  5. 实验10.3_数值显示拓展_dword型数转变为表示十进制数的字符串

    assume cs:code data segment db 10 dup (0) data ends code segment start : mov ax,4240H;F4240H=1000000 ...

  6. android 项目学习随笔十七(ListView、GridView显示组图)

    ListView.GridView显示组图,处理机制相同 <?xml version="1.0" encoding="utf-8"?> <Li ...

  7. excel在一个图表内,显示折线图和柱状图

      折线图和柱状图,在同一个图表中拆分显示   一个图,设置主坐标轴 另外一个图,设置次坐标轴     拆分,通过调整纵坐标的最小值和最大值来实现     关于图表的标题,选中图表,选择布局,然后图表 ...

  8. emWin(ucGui)数值显示例程 -【worldsing笔记】

    本例程下载:2.emWin5.26(ucGui)VS2008数字显示.zip   在emWin显示文本字符还是容易,我们也可以使用字符串和标准 C 库的函数来显示数值.然而,有时候这会是件困难的事.通 ...

  9. 在饼图上显示百分比值(报表生成器和 SSRS)

    在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...

随机推荐

  1. typeerror: __init__() missing 2 required positional arguments: 'inputs' and 'outputs'

    1 问题描述 使用下边这条命令去检查 TensorFlow Object Detection API是否正确安装: python object_detection\builders\model_bui ...

  2. 模拟实现call、apply

    1. 知识点补充: 首先在模拟实现前,先Mark一些我之前不知道的知识: a. eval(string)函数:可计算某个字符串,并执行其中的JavaScript代码 其中,string是必需传入的待计 ...

  3. 阿里云 Aliplayer高级功能介绍(四):直播时移

    基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...

  4. Chrome快捷键, Mac 下 Chrome 浏览器 快捷键

    Chrome窗口和标签页快捷键:Ctrl+N 打开新窗口 Ctrl+T 打开新标签页 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O,然后选择文件 在谷歌浏览器中打开计算机上的文件 按 ...

  5. 《DSP using MATLAB》Problem 8.14

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  6. Synchronized理解及用法

    加锁: 1.同步实例方法,锁是当前实例对象 2.同步类方法,锁的是当前类对象 3.同步代码块,锁是括号里面的对象 原理: JVM内置锁通过synchronized使用,通过内部对象Monitor(监视 ...

  7. Python学习day37-并发编程(3)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  8. hadoop2.x 完全分布式详细集群搭建(图文:4台机器)

    在准备之前说一下本次搭建的各节点角色,进程. nameNode 进程:NameNode dataNode  进程:DataNode resourceManager :ResourceManager n ...

  9. Apache ActiveMQ教程

    一.特性及优势 1.实现JMS1.1规范,支持J2EE1.4以上 2.可运行于任何jvm和大部分web容器(ActiveMQ works great in any JVM) 3.支持多种语言客户端(j ...

  10. STL与泛型编程-学习2-GeekBand

    9, 容器 Deque 双向队列 和vector类似, 新增加: push_front 在头部插入一个元素 pop_front 在头部弹出一个元素 Deque和vector内存管理不同: 大块分配内存 ...