Highcharts 饼图数值显示在图形上
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 饼图数值显示在图形上的更多相关文章
- HighCharts 在IE8下饼图不显示的问题
HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报 'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: ...
- echarts饼图不显示数据为0的数据
首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
- [Unity3D]Unity3D游戏开发之伤害数值显示
大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.众所周知,在RPG游戏策划中最为重要的一个环节是数值策划.数值策划是一个关于游戏平衡方面的概念 ...
- 多个SVG图形集成到一个SVG图形上
SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...
- 实验10.3_数值显示拓展_dword型数转变为表示十进制数的字符串
assume cs:code data segment db 10 dup (0) data ends code segment start : mov ax,4240H;F4240H=1000000 ...
- android 项目学习随笔十七(ListView、GridView显示组图)
ListView.GridView显示组图,处理机制相同 <?xml version="1.0" encoding="utf-8"?> <Li ...
- excel在一个图表内,显示折线图和柱状图
折线图和柱状图,在同一个图表中拆分显示 一个图,设置主坐标轴 另外一个图,设置次坐标轴 拆分,通过调整纵坐标的最小值和最大值来实现 关于图表的标题,选中图表,选择布局,然后图表 ...
- emWin(ucGui)数值显示例程 -【worldsing笔记】
本例程下载:2.emWin5.26(ucGui)VS2008数字显示.zip 在emWin显示文本字符还是容易,我们也可以使用字符串和标准 C 库的函数来显示数值.然而,有时候这会是件困难的事.通 ...
- 在饼图上显示百分比值(报表生成器和 SSRS)
在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...
随机推荐
- 在Eclipse中修改Jsp页面的新增模板
打开Eclipse的Preferences页面 路径: Window à Preferences 搜索"jsp",点击"Templates",选择要修改的Jsp ...
- T2980 LR棋盘【Dp+空间/时间优化】
Online Judge:未知 Label:Dp+滚动+前缀和优化 题目描述 有一个长度为1*n的棋盘,有一些棋子在上面,标记为L和R. 每次操作可以把标记为L的棋子,向左移动一格,把标记为R的棋子, ...
- html--div里让图片水平居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- localhost与127.0.0.1区别
一.连接MySQL数据库有两种方式:TCP/IP(一般理解的端口的那种)和Unix套接字(一般叫socket或者sock) 大部分情况下,可以用localhost代表本机127.,但是在MySQL连接 ...
- 深入理解Java虚拟机(程序编译与代码优化)
文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...
- UTF小记(一)
前言 十六进制(简写为hex或下标16)在数学中是一种逢16进1的进位制.一般用数字0到9和字母A到F(或a~f)表示,其中:A~F表示10~15,这些称作十六进制数字. 不同电脑系统.编程语言对于1 ...
- System.Web.Mvc.ContentResult.cs
ylbtech-System.Web.Mvc.ContentResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Publ ...
- 纯 CSS 实现实心三角形和空心三角形
一.实心三角形 1.代码 .div-angles{ width:; height:; border-style: solid; border-width:30px; border-color: tra ...
- day 42 02--CSS的继承性和层叠性
02--CSS的继承性和层叠性 本节目录 一 继承性 二 层叠性 三 层叠性权重相同处理 一 继承性 css有两大特性:继承性和层叠性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点 ...
- hibernate离线条件查询设置or关系
detachedCriteria.add(Restrictions.or(Restrictions.isNull(""), Restrictions.isNull("&q ...