jQuery柱状图饼状图曲线图统计图表插件 - jQueryfuns
上传于 两年前|
类似cpu趋势变化图表示例
$(document).ready(function() {
chart = new Highcharts.Chart({
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 10,
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
text: 'Live random data',
margin: '10px 100px 0 0' // center it
type: 'datetime',
tickPixelInterval: 150
text: 'Value'
plotLines: [{
color: '#808080'
tooltip: {
formatter: function() {
return '&b&'+ this.series.name +'&/b&&br/&'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'&br/&'+
Highcharts.numberFormat(this.y, 2);
enabled: false
exporting: {
enabled: false
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
for (i = -19; i &= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
立即下载 ( 文件大小：0.19 M)
Mozilla Firefox
Google Chrome
也许你还喜欢
键盘快捷键:1799人阅读
HighCharts（28）
JQuery（198）
HighCharts之2D颜色阶梯饼图
1、实例源码
PieGradient.html：
&!DOCTYPE html&
&meta charset=&UTF-8&&
&title&HighCharts 2D颜色阶梯饼图&/title&
&script type=&text/javascript& src=&../scripts/jquery-1.11.0.js&&&/script&
&script type=&text/javascript& src=&../scripts/js/highcharts.js&&&/script&
&script type=&text/javascript&&
$(function(){
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
radialGradient: { cx: 0.8, cy: 0.5, r: 0.6 },
[0, color],
[1, Highcharts.Color(color).brighten(-0.1).get('rgb')] // darken
// 构建饼图
$('#pieChart').highcharts({
plotBackgroundColor: '#CCCCCC',
plotBorderWidth: '20px',
plotShadow: true
text: '2013年年收入'
tooltip: {
pointFormat: '{series.name}: &b&{point.percentage:.1f}%&/b&'
plotOptions: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#0000FF',
connectorColor: '#00FF00',
formatter: function() {
return '&b&'+ this.point.name +'&/b&: '+ this.percentage +' %';
series: [{
type: 'pie',
name: '收入比例',
['一月', 5487],
['二月', 8745],
['三月', 3451],
['四月', 9845],
['五月', 6451],
['六月', 7412],
name: '七月',
sliced: true,
selected: true
['八月', 4151],
['九月', 5421],
['十月', 6545],
['十一月', 3545],
['十二月', 8541]
&div id=&pieChart& style=&width: 1250 height: 500 margin: 0 auto&&&/div&
2、实例结果
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2615772次
积分：45115
积分：45115
排名：第54名
原创：1730篇
转载：76篇
评论：800条
文章：47篇
阅读：41495
文章：10篇
阅读：23739
文章：13篇
阅读：22115
文章：14篇
阅读：60293
(1)(9)(16)(29)(25)(28)(33)(35)(30)(17)(11)(21)(28)(31)(33)(43)(35)(35)(26)(29)(27)(55)(75)(19)(58)(41)(11)(35)(13)(37)(120)(68)(106)(66)(100)(83)(76)(78)(34)(56)(29)(53)(46)(15)下载资源：
下载积分：
flot.js折线图$(function() {
var data = [{
&label&: &&,
data: [[1, 7.5], [2, 7.5], [3, 5.7], [4, 8.9], [5, 10], [6, 7], [7, 9], [8, 13], [9, 7], [10, 6]],
points: {show: true, radius: 4, lineWidth: 3, fillColor: 'rgba(18,147,204,0.3)'},
lines: {show: true, lineWidth: 0, fill: 0.5, fillColor: 'rgba(18,147,204,0.3)'},
color: '#fff',
grid: {hoverable: true, clickable: true, borderWidth: 0, color: '#ccc'},
var options = {
show: true,
show: true
tickDecimals: 0,
tickSize: 1
grid: {hoverable: true, borderWidth: 1, borderColor: '#ccc'}// 开启 hoverable 事件
$.plot($(&#placeholder&), data, options);
// 节点提示
$(&&div id='tooltip'&&/div&&).css({
position: &absolute&,
display: &none&,
border: &1px solid #000&,
padding: &3px 8px&,
&background-color&: &#000&,
opacity: 0.80,
color: &#FFF&,
&border-radius&: &4px&,
&font-size&: &12px&
}).appendTo(&body&);
$(&#placeholder&).bind(&plothover&, function(event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
$(&#tooltip&).html(item.series.label + & of & + x + & = & + y)
.css({top: item.pageY - 38, left: item.pageX - 0})
.fadeIn(200);
$(&#tooltip&).hide();
});flot.js柱状图function getPlotStatics(obj) {
var datas = obj.attr(&data-datas&);
if (datas == '') {
var data = eval(&(& + datas + &)&);
var options = {
show: true,
show: true
mode: &categories&,
tickLength: 2
colors: [&#7cb5ec&, &#7cb5ec&],
show: false, //设置是否出现分类名称框（即所有分类的名称出现在图的某个位置）
grid: {hoverable: true, borderWidth: 1, borderColor: '#ccc', }// 开启 hoverable 事件
$.plot(obj, data, options);
obj.bind(&plothover&, function(event, pos, item) {
if (item) {
var unit = obj.attr(&data-unit&) ? obj.attr(&data-unit&) + & & : &&;
var x = item.datapoint[0].toFixed(2), y = unit + item.datapoint[1].toFixed(2);
//$(&#tooltip&).html(item.series.label + & of & + x + & = & + y)
$(&#tooltip&).html(y)
.css({top: item.pageY - 38, left: item.pageX - 0})
.fadeIn(200);
$(&#tooltip&).hide();
jQuery(function($) {
if ($('.graphs_init').length & 0) {
$('.graphs_init').each(function() {
getPlotStatics($(this));
声明：本文为原创文章，如需转载，请注明来源并保留原文链接：
友情提示：垃圾评论一律封号...
flot.js完美演示柱状图折线图和饼状图(原创)
所需积分：106
亲，积分不够，多去发布资源
或联系QQ人工充值
亲，vip会员下载原创作品 5 折。
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值
用户名/邮箱
两周内免登录
绑定送200积分如何画Flot折线图
如何画Flot柱形图
如何画Flot折线图和柱形图
如何画Flot实时更新图
如何画Flot堆栈图
如何画Flot分区图
Flot数据实时更新
如何画Flot圆饼图
圆饼图是用于看各组资料间的比例,用Flot绘制圆饼图相当简单,不过Flot需要加入jquery.flot.pie.js插件才能给制圆饼图,我们沿用上一章用过的世界人口数据来当作圆饼图的数据源,并且加入一些互动功能呈现.
圆饼图范例 (世界人口比例)
圆饼图资料
因为Flot不支持圆饼图,所以必须加入圆饼图的插件jquery.flot.pie.js,此范例会用到的档案清单如下.
&script type=&text/javascript& src=&/js/jquery-1.8.3.min.js&&&/script&      
&!--[if lte IE 8]&&script language=&javascript& type=&text/javascript& src=&/js/flot/excanvas.min.js&&&/script&&![endif]--&   
&script type=&text/javascript& src=&/js/flot/jquery.flot.js&&&/script&
&script type=&text/javascript& src=&/js/flot/jquery.flot.pie.js&&&/script&
第一步我们先建立一个&div&, 并且指定一个id, 且设定长度及宽度, 这将会成为Flot绘图的定位点.
&div id=&flot-placeholder& style=&width:400height:300px&&&/div&
建立圆饼图所用的数据比其它的图表来得简单,首先我们建立一个叫dataSet的数组变量,并依序插入6个对象数据.label属性为各大洲的名称,设定data属性各大洲的人口数,在这里你只要输入原始数字后Flot会自动帮我们算出百分比,另外color属性则是指定圆饼图区块的颜色.
var dataSet = [
{label: "Asia", data: , color: "#005CDE" },
{ label: "Latin America", data: , color: "#00A36A" },
{ label: "Africa", data: , color: "#7D0096" },
{ label: "Oceania", data: , color: "#992B00" },
{ label: "Europe", data: , color: "#DE000F" },
{ label: "North America", data: , color: "#ED7B00" }
圆饼图选项
圆饼图的选项设定都在series.pie里,要让Flot绘制圆饼图就要设定series.pie.show为true.另外我们自定义了圆饼图的标签,默认圆饼图会自动显示图例,但如果你想改成显示卷标时,可设定legend.show为false,Flot就不会显示图例而改显示卷标.
标签部份我们更改了几个地方,label.radius是设定标签出现在圆饼图的半径位置,如果值是设置0到1之间,那就会用作容器可用空间大小的百分比,如果值是设定大于等于1的话,则会用作像素.
另外我们自定义了label.formatter,此函式可用来自定义显示卷标.我们还设定了label.background.opacity,用来指定标签背景的透明度,而label.background.color则用来设定标签背景颜色.
show: true,
show:true,
radius: 0.8,
formatter: function (label, series) {
return '' +
label + ' : ' +
Math.round(series.percent) +
background: {
opacity: 0.8,
color: '#000'
圆饼图互动功能
因为圆饼图卷标默认只能显示百分比数据,但如果我们想要知让用户鼠标移到圆饼图区块上就可以显示该区块的原始数据的话,可以用Flot内建的&plothover&事件来完成.首先我们先在定位点下方插入一个div,并给与一个id名称flot-memo.
&div id=&flot-memo& style=&text-align:height:30width:250height:20text-align:margin:0 auto&&&/div&
要使用"plothover"事件前,需要将选项中的grid.hoverable设为true,如此才能在鼠标移过图表上方时触发事件.
hoverable: true
再来建立一个自定义函式叫&showMemo&,在函式里绑定"plothover"事件的,此事件传入item对象,我们就可以从item.series.color取得资料序列的颜色,从item.series.label取得数据的卷标名称,最后就是我们要的原始数据,从item.series.data可以取得鼠标停留在区块上方时该区块的数据,
而item.series.data[0][1]就是我们要的数据.最后再把数据显示在#flot-memo里即可.
$.fn.showMemo = function () {
$(this).bind(&plothover&, function (event, pos, item) {
if (!item) { }
var html = [];
var percent = parseFloat(item.series.percent).toFixed(2);
html.push(&&div style=\&border:1background-color:&,
item.series.color,
&&span style=\&color:white\&&&,
item.series.label,
$.formatNumber(item.series.data[0][1], { format: &#,###&, locale: &us& }),
& (&, percent, &%)&,
&&/span&&,
&&/div&&);
$(&#flot-memo&).html(html.join(''));
最后呼叫$.plot并带入数据及选项, 并且别忘了呼叫showMemo().
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataSet, options);
$("#flot-placeholder").showMemo();
其它圆饼图
圆饼图还支持其它不同的类型,以下展示几种不同类型的圆饼图
倾斜圆饼图范例
倾斜圆饼图选项程序代码
var options = {
show: true,
甜甜圈圆饼图范例
甜甜圈圆饼图选项程序代码
var options = {
show: true,
innerRadius: 0.5,
show: true
本章的完整范例程序代码可以在这里找到并做在线练习jQuery Flot 饼状图 样式修改。如图所示，该饼状图使用JQuery Flot画的，其右边的列表前方形状默认为“矩形”，请问如何将其改成“圆形”？
找到它的样式，设置成：width:30height:30border-radius:15就可以圆了。
为您推荐：
扫描下载二维码