JQuery Highcharts 动态生成图表的方法

2025-08-13 05:45:30

代码如下:

$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});

var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
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);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
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);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;

for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});

});

jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src=&q
jQuery Chart图表制作组件Highcharts用法详解

本文实例讲述了jQuery Chart图表制作组件Highcharts用法.分享给大家供大家参考,具体如下: Highcharts是一个制作图表的纯Javascript类库,主要特性如下: ① 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: ② 对个人用户完全免费: ③ 纯JS,无BS: ④ 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: ⑤ 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highchar
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D柱状图.折线图的组合双轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合双轴图</title> <script type="text/javascript"
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D对数饼图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D对数轴饼图</title> <script type="text/javascript" src="js/jqu
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D柱状图.折线图和饼图的组合图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图和饼图的组合图</title> <script type="text/javascript"
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现2D柱状图.折线图的组合多轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合多轴图</title> <script type="text/javascript"
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制的基本折线图效果.分享给大家供大家参考,具体如下: 1. 实例源码: <!DOCTYPE html> <html> <head> <title>HighCharts基本折线图</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
jQuery.Highcharts.js绘制柱状图饼状图曲线图

在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码代码如下: var chart; $(document).ready(function() { chart = new Highcharts.Chart({ c
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D金字塔图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D金字塔分布图</title> <script type="text/javascript" src="js/jqu
浅析jquery的js图表组件highcharts

Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对于非商用用户免费(包括个人网站.非盈利性组织.学生团体等). 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts实现的2D回归直线散点效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts之2D回归直线的散点</title> <script type="text/javascript" src="js
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D半圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D半圆环图</title> <script type="text/javascript" src="js/jquer
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D圆环图</title> <script type="text/javascript" src="js/jquery-

JQuery Highcharts 动态生成图表的方法

相关推荐

随机推荐