您的位置:首页 > 其它

Highcharts基本配置说明

2013-06-09 09:20 295 查看
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginLeft: 83,
marginTop: 45,
marginRight: 44,
marginBottom: 60,
zoomType: 'xy'
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
title: {
text: $("#bbmc").val(),
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
plotOptions: {
series: {
lineWidth: 0.5, //过程线的宽度
marker: {
radius: 1 //过程线上点的宽度
}
}
},

xAxis: {
title: {
text: '水位(m)',  //显示X轴名称
align: "high",
style: {
color: '#000000',  //显示Y轴名称文字颜色
font: 'bold 14px "STSong"'
}
},
labels: {
step: $("#step").val(),//控制x轴显示label的间距
title: {
enabled: false,
text: 'X-values',
align: 'middle', // low, middle or high
margin: 35,
style: {
color: '#6D869F'
}
}
},
categories: ss

},
yAxis: [{ // Primary yAxis   //显示Y轴名称
title: {
text: '库容(' + $("#dw").val() + ')',  //显示Y轴名称
style: {
color: '#000000',  //显示Y轴名称文字颜色
font: 'bold 14px "STSong"'
}
}
}, { // Primary yAxis   //显示Y轴名称
title: {
text: '面积(km²)',  //显示Y轴名称
style: {
color: '#000000',  //显示Y轴名称文字颜色
font: 'bold 14px "STSong"'
}
},
opposite: true //控制标签是否显示到上面标签的对面
}],
tooltip: {
formatter: function () {
var s = '<b>水位:</b>' + this.x + '<b>m</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + '<b>' + point.series.name + ': ' + '</b>' +
point.y + '<b>' + (point.series.name == '库容' ? $("#dw").val() : (point.series.name == '面积' ? ' km²' : ' m')) + '</b>';
});
return s;
},
crosshairs: true,
borderColor: '#4572A7',
shared: true
},
legend: {
layout: 'horizontal', //控制图例内容显示的方向:此处为水平显示,值可以为:horizontal、vertical
align: 'left',   //控制图例水平显示的位置,此处为左边,值可以为:left、right
verticalAlign: 'bottom', //控制图例垂直显示的位置,此处为底部,值可以为:bottom、top
x: 70
},
lang: {
exportButtonTitle: '导出图片',
printButtonTitle: '打印',
resetZoom: '100',
downloadPNG: '导出PNG图片',
downloadJPEG: '导出JPEG图片',
downloadPDF: '导出PDF',
downloadSVG: '导出SVG'
},
series: [{
name: '库容',
//color: '#4572A7',
type: 'spline',
data: charts
}, {
name: '面积',
type: 'spline',
data: wsfas
}],
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: