Highcharts 动态图_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Highcharts 动态图
W3Cschool（）最大的技术知...|
总评分0.0|
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢基础教程数据处理图表类型高级特性图表导出模块图表设计及样式插件扩展地图Highstock服务端动态渲染网页是生成网页的最常用方法， 该方法同样适用于动态生成包含 Highcharts 图表的网页。服务端动态渲染网页的做法：后端程序读取数据库数据并按照一定的业务逻辑处理成字符串，在页面对应位置上输出。下面我们用 PHP 举例简单说明这个过程：实例1： 只包含数值的&?php
// php 读取数据库并生成 字符串，这里这是简单的实例
// 读取数据
while ($row = mysql_fetch_array($result)) {
$data[] = $row['value'];
// php 数组拼接成字符串，最终的结果是 "2, 4, 5, 8" 这种形式
$dataString = join($data, ',');
&div id="container"&&/div&
&script src="/highcharts/highcharts.js"&&/script&
var chart = new Highcharts.Chart({
renderTo: 'container'
series: [{
data: [&?php echo $dataString ?&], // 在对应的位置输出
pointStart: 0,
pointInterval: 2
实例2： 包含 x 和 y 的形式&?php
while ($row = mysql_fetch_array($result)) {
$datetime *= 1000; // 将 Unix 时间戳转换成 JavaScript 时间戳
$data[] = "[$datetime, $value]"; // 生成 data 数组
// 转换成字符串，最终的数据格式是： [ [时间戳，值], [时间戳，值], [时间戳，值]]
$dataString = join($data, ',');
&div id="container"&&/div&
&script type="text/javascript" src="/highcharts/highcharts.js"&&/script&
var chart = new Highcharts.Chart({
renderTo: 'container'
series: [{
data: [&?php echo $dataString ?&]
提示：在 PHP 中也可以用
来将对象转换成字符串。动态渲染的优缺点用动态渲染的方法生成 Highcharts 的优点是可以灵活的生成复杂的图表配置，缺点是无法灵活的进行数据交互。赏&&目录订阅更新
在线客服选择服务类型Highstock生成股票K线图 极客标签 | 在线编程知识分享学习平台
发布于，阅读5312次，收藏 1次，评论条 - 来自
Highstock生成股票K线图
使用HightStock生成股票K线图例子。
ＪＳＯＮ数据文件
[0,67.37,68.38,67.12,67.79,],
[0,68.10,68.25,64.75,64.98,],
[0,64.70,65.70,64.07,65.26,],
[0,65.68,66.26,63.12,63.18,],
[0,63.26,64.88,62.82,64.51,],
[0,63.87,63.99,62.77,63.38,],
[0,64.86,65.19,63.00,63.15,],
[0,62.99,63.65,61.56,63.34,],
[0,64.26,64.45,63.29,64.33,],
[0,64.31,64.56,63.14,63.55,],
[0,63.29,63.30,61.22,61.22,],
[0,61.76,61.79,58.69,59.77,]
相关Javascript
$.getJSON('data.json', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
// unit name
// allowed multiples
[1, 2, 3, 4, 6]
for (i; i & dataL i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
volume.push([
data[i][0], // the date
data[i][5] // the volume
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
text: 'AAPL Historical'
align: 'right',
text: 'OHLC'
height: '60%',
lineWidth: 2
align: 'right',
text: 'Volume'
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
type: 'column',
name: 'Volume',
data: volume,
dataGrouping: {
units: groupingUnits
前端最新编程技术和体验，请立刻访问极客标签编程学习平台，真正的帮助你学习编程，现在就加入我们成为“GEEK”吧！！
极客主页：
新浪微博：
已上传的图片列表：
尚未上传任何图片...
在线调试地址范例
例如：/gb/debug/bc4a78a6--b7cb-649ce1bda104.htm
以后再转发，立刻下载！博客分类：
实现一个柱状图，这个柱状图的高度在不停的刷新，效果如下：
官网是没有动态刷新的示例的，由于需要我查看了其源码，并根据之前示例做出了动态柱状图的效果，希望对同学们有用！
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&
&title&Highcharts Example&/title&
&script language="javascript" type="text/javascript" src="jquery.min.js"&&/script&
&script language="javascript" type="text/javascript" src="highcharts.js"&&/script&
&script language="javascript" type="text/javascript" src="exporting.js"&&/script&
&script type="text/javascript"&
$(document).ready(function() {
chart = new Highcharts.Chart({
renderTo: 'container',
type: 'column',
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var data = [];
data.push(['Apples', Math.random()]);
data.push(['Oranges', Math.random()]);
data.push(['Pears', Math.random()]);
data.push(['Grapes', Math.random()]);
data.push(['Bananas', Math.random()]);
series.setData(data);
text: '&b&Java小强制作&/b&'
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
text: '当前产值'
stackLabels: {
enabled: true,
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
align: 'right',
verticalAlign: 'top',
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
tooltip: {
formatter: function() {
return '&b&'+ this.x +'&/b&&br/&'+
this.series.name +': '+ this.y +'&br/&'+
'Total: '+ this.point.stackT
plotOptions: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
&div id="container" style="width: 800height: 400px"&&/div&
同样，绘制这个图需要的也是双维数组，我尝试了几个方法，使用 series.setData(data); 可是实现数据的重新指定！
在highcharts.js文件中你可以查看他的一些方法！
wang4674890
浏览: 59899 次
来自: 厦门
SELECT t.province,DECODE(landsc ...
不是特么很懂帮助企业打造成功软件！
热门搜索：
&&&&&&&&&&Highcharts动态图表：主-详图表
Highcharts动态图表功能在线演示：当鼠标移动到图表的某个具体点时动态显示其详细信息。
服务与支持
重庆 / 023-
北京 / 010-
400-700-1020
慧都旗下网站
慧都科技有限公司 版权所有 Copyright
100%正版软件
400-700-1020