var chart;
$(document).ready( function() {
chart = new Highcharts.Chart({
chart: {//整体控制
renderTo: 'container',//把报表放进那个盒子里
defaultSeriesType: 'spline',//可选,默认为line。控制线条样式,line:折线;spline:平滑的线;area:折线、下边有颜色块儿;areaspline:平滑的线、下边有颜色块儿;column:柱状图;bar:横向条形图;pie:饼图;scatter:点状图;
marginRight: 130,//可选,控制报表位置
marginBottom: 25,//可选,控制报表位置
inverted: false,//可选,控制显示方式,默认上下正向显示
shadow:true,//外框阴影
backgroundColor:"#FFF",
animation:true,
borderColor:"#888",
borderRadius:5,
borderWidth:1,
ignoreHiddenSeries:true,
reflow:true,
plotBorderWidth:1,
alignTicks:true
//defaultSeriesType :'dxk'//别名
},
global: {
useUTC: false
},
labels:{//在报表上显示的一些文本
items:[{
html:'dxk',
style:{left:'100px',top:'100px'}
},
{
html:'wuhui',
style:{left:'160px',top:'100px'}
}]
},
credits:{//右下角的文本
enabled: true,
position: {
align: 'right',
x: -10,
y: -10
},
href: http://www.cqu.edu.cn,
style: {
color:'blue'
},
text: "duxiaokong.com"
},
plotOptions:{//绘图线条控制
spline:{
allowPointSelect :true,//是否允许选中点
animation:true,//是否在显示报表的时候使用动画
cursor:'pointer',//鼠标放在点上的时候显示的形状
dataLabels:{
enabled :true,//是否在点的旁边显示数据
rotation:0
},
enableMouseTracking:true,//鼠标放上去是否显示那个小方框
events:{//监听点的鼠标事件
click: function() {
}
},
marker:{
enabled:true,//是否显示点
radius:3,//点的半径
//fillColor:"#888"
//lineColor:"#000"
//symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//这个可以让点用图片来显示
states:{
hover:{
enabled:true//鼠标放上去点是否放大
},
select:{
enabled:false//控制鼠标选中点时候的状态
}
}
},
states:{
hover:{
enabled:true,//鼠标放上去线的状态控制
lineWidth:3
}
},
stickyTracking:true,//跟踪
visible:true,
lineWidth:2,//线条粗细
//pointStart:100,
}
},
title: {
text: 'Monthly Average Temperature',//标题
x: -20 //控制标题位置
},
subtitle: {
text: 'Source: WorldClimate.com',//副标题
x: -20//控制标题位置
},
xAxis: {//x轴数据
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
//gridLineWidth:1,
//gridLineDashStyle: 'longdash',
lineWidth:1,//最下边的那条水平线
plotBands:{//一束带
color :"#CCC",
from:4,
to:5,
label: {
text: 'Plot band',
rotation: 90,
textAlign: 'left'
}
},
plotLines: [{//一条竖线
color: '#FF0000',
width: 2,
value: 5.5
}],
//minorGridLineWidth: 2,
//minorTickInterval: 'auto',
//minorTickColor: '#000000',
//minorTickWidth: 10
},
yAxis: {//y轴
title: {
text: 'Temperature (°C)'//y轴标题
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
//reversed: true
opposite: true,
//gridLineDashStyle: 'longdash',//线条类型
//minorGridLineColor: '#E0E0E0',
//minorTickInterval: 'auto'
},
tooltip: {//控制鼠标放上点后显示的提示框
//enabled:true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
},
backgroundColor :"#CCC",
//crosshairs: {
// width: 1,
// color: 'gray',
// dashStyle: 'shortdot'
//}
crosshairs:[{//控制十字线
width:1,
color:"#CCC",
dashStyle:"longdash"
},
{
width:1,
color:"#CCC",
dashStyle:"longdash"
}],
//crosshairs: [true, true],
shared :false,
shadow :true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
borderWidth: 0,
shadow:false
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
示例二、项目中用到的动态曲线图,多条坐标线,随时间向左移动
/<![CDATA[
var chart;
var datas = <{$json_status}>;
var len = datas.length;
$(document).ready( function() {
getData = function(item) {
var data = [],i;
for (i = 0; i < len; i++) {
data.push({
y:(datas[i][item])/1
});
}
return data;
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 180,
plotBorderWidth:0,
zoomType : 'xy',
events: {
load: function() {
var series_CPU = this.series[0];
var series_MEM = this.series[1];
var series_DISK = this.series[2];
var j = 0;
setInterval( function() {
y_CPU = (datas[j]['CPU'])/1;
y_MEM = (datas[j]['MEM'])/1;
y_DISK = (datas[j]['DISK'])/1;
if(j<len-1) {
j++;
} else {
j=0;
}
series_CPU.addPoint(y_CPU, true, true);
series_MEM.addPoint(y_MEM, false, true);
series_DISK.addPoint(y_DISK, false, true);
}, 1000);
}
}
},
title: {
text: '设备状态图'
},
credits:{
enabled: false
},
plotOptions:{
spline:{
dataLabels:{
enabled :false,
}
}
},
yAxis: [{
title: {
text: 'CPU使用率'
},
labels : {
formatter : function() {
return this.value + '%';
}
},
lineWidth: 1,
tickWidth: 1
},
{
title:{
text:'内存使用'
},
opposite:true,
labels : {
formatter : function() {
return this.value + 'M';
}
},
lineWidth: 1,
tickWidth: 1
},
{
title:{
text:'硬盘使用'
},
opposite:true,
labels : {
formatter : function() {
return this.value + 'M';
}
},
lineWidth: 1,
tickWidth: 1
}],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
//Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
//'时间:'+this.x+'<br/>'+
Highcharts.numberFormat(this.y, 0);
},
crosshairs: [true, true]
},
legend: {
enabled: true,
borderWidth: 0
},
exporting: {
enabled: true
},
series: [{
name: 'CPU利用率',
type:'line',
data: getData('CPU')
},
{
name: '内存使用',
data: getData('MEM'),
yAxis:1
},
{
name: '硬盘使用',
data: getData('DISK'),
yAxis:2
}]
});
});
//]]>