<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://static.hcharts.cn/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/highcharts.js"></script>
<script type="text/javascript" src="http://www.hcharts.cn/demo/js/exporting.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: '10000号实时监控系统'
},
subtitle: {
text: '话务预测分析'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: '数值'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 20,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return '技能组:'+
this.x +'</br>值：'+ this.y +' 个';
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '排班量'
}, {
name: '话务量'
}, {
name: '接通量'
}]
};
/*
var url = "www.baidu.com";
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
var paiBan = [];
var huaWu = [];
var jieTong = [];
jQuery.each(result, function(m, obj) {
paiBan.push(
parseInt(obj.value0)
);
huaWu.push(
parseInt(obj.value1)
);
jieTong.push(
parseInt(obj.value2)
);
});
var y = Math.random();
options.series[0].data = y;
options.series[1].data = y;
options.series[2].data = y;
chart = new Highcharts.Chart(options);
}
});*/
setInterval(function(){
var arrays=[];
for( var i=0;i<10;i++)
{
var y = Math.random();
arrays.push(y);
}
options.series[0].data = arrays;
options.series[1].data = arrays;
options.series[2].data = arrays;
if(chart)
{
chart.series[0].setData(arrays);
chart.series[1].setData(arrays);
chart.series[2].setData(arrays);
}else
{
chart = new Highcharts.Chart(options);
}
},1000);
});
});
window.returnValue='true';
</script>
</head>
<body>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
分享到：
相关推荐
折线、双Y轴、不交叉、highcharts、按照日期分割线 折线、双Y轴、不交叉、highcharts、按照日期分割线
由于项目需要对根据Highcharts的实例及大量的尝试， 改造出实时流量趋势图
highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要...另外 怎么用highcharts 和 fusioncharts 画 雷达图 ，仪表图 ，会的 朋友 ，赐教一下！
Highcharts 导出图片，具体的图片导出的代码，带吗代码代码代码
Highcharts柱状图显示，柱状图显示颜色不一样
javascript的实时趋势图，可用于asp.net
博文《关于highcharts的封装和刷新》中代码.
android 调用highcharts.js 实现折线图展示
下面小编就为大家带来一篇Highcharts 多个Y轴动态刷新数据的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HighCharts导出图片是发现请求的是官网，于是找了一下，整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...
所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。 下面一起来学习学习Highcharts的...
highcharts 动态指定 x y数据
highcharts 导出图片 .net c#Demo例子
HighCharts导出图片是发现请求的是官网，于是找了一下，整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...
使用Highcharts实现的图形报表，各种柱形对比图，柱形级别图，单一柱形图，各种功能。
GitHub上.Net版HighCharts导出图片的服务，整理成了一个工具类和Demo页面 博文：http://www.cnblogs.com/cl-blogs/p/5298013.html
highcharts柱状图
highcharts导出图片的后台代码，这样就不用从highcharts官网服务器上进行图片导出了，成了一个本地的服务器！
Highcharts 是一个用纯JavaScript编写的一个图表库，HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。