var chart = Highcharts.stockChart('container', {
chart: {
marginRight: 50,
},
exporting: {
enabled : true, // 不关闭导出按钮
url : 'https://export.highcharts.com.cn'
},
credits: {//版权信息
enable: false,
href: '',
text: ''
},
legend: {//图例
enabled : true,//是否显示图例
align : 'top',
},
navigation: {
buttonOptions: {
symbolStroke: 'red'
}
},
navigator : {//导航器
adaptToUpdatedData : true,
enable : true,
maskInside : true,
opposite : false,
outlineColor : '#ccc'
},
scrollbar : {
height : 10,
minWidth : 50,
},
rangeSelector : {//顶部按钮,输入框样式
inputDateFormat : '%Y-%m-%d',
inputEditDateFormat : '%Y-%m-%d',
enabled : true,
selected : 0,//表示以上定义button的index,从0开始
buttons : [
{
type : 'day',
count : 1,
text : '1天',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
},
{
type : 'week',
count : 1,
text : '1周',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
},
{
type : 'all',
text : '全部',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
} ],
},
title: {
text: '运行状态表'
},
xAxis: {
type : 'datetime',
min : 0,
max : timeList[timeList.length/2],
dateTimeLabelFormats: {//时间格式
day : '%m-%d',
week : '%m-%d',
month : '%y-%m',
year : '%Y'
},
labels : {
align : 'left',
style : {
color : '#888'
},
fontSize : '12px',
fontFamily : 'Verdana, sans-serif',
rotation : '75',//调节倾斜角度偏移
y : 20,
x : -3,
minPadding : 0.5,
maxPadding : 0.0,
tickInterval : 0,
tickmarkPlacement : 'between'
}
},
tooltip: {
split: true,
shared: true,
followTouchMove: true,
shape: 'callout',
xDateFormat: '%Y-%m-%d',
headerFormat: '<small class="headerFormat">{point.key}总时间:
{point.stackTotal}小时<div></div></small><table>',
pointFormat: '<tr><td style="color: {series.color}"><b>{series.name}: </b>
</td>' +
'<td style="text-align: right"><b>{point.y:.2f}小时</td>
</tr>',
footerFormat: '</table>',
},
plotOptions : {
series : {
showInLegend : true
},
column : {
stacking : 'normal',
dataLabels : {
style : {
textShadow : '0 0 3px black'
}
}
},
},
yAxis : [
{
labels : {
align : 'center'
},
opposite: false
},
{
labels : {
align : 'right'
},
opposite: false
},
{
labels : {
align : 'right'
},
opposite: false
},
{
labels : {
align : 'right'
},
opposite: false
} ],
series : [
{
name : 'name1',
color : '#B5B5B5',
type : 'column',
data : data1,
yAxis : 1,
dataGrouping : {
units : groupingUnits
}
},
{
name : 'name2',
color : '#eb3928',
data : data2,
type : 'column',
yAxis : 1,
dataGrouping : {
units : groupingUnits
}
},
{
name : 'name3',
color : '#ffc002',
data : data3,
type : 'column',
yAxis : 1,
dataGrouping : {
units : groupingUnits
}
},
{
name : 'name4',
color : '#08c60c ',
data : data4,
type : 'column',
yAxis : 1,
dataGrouping : {
units : groupingUnits
}
} ]
});
var groupingUnits = [[
'week',
[1]
], [
'month',
[1, 2, 3, 4, 6]
]];
Highcharts.setOptions({
global : {
useUTC : false//世界时间
},
lang: {
rangeSelectorZoom : '范围:',
shortMonths : [ '一月', '二月',
'三月', '四月', '五月',
'六月', '七月', '八月',
'九月', '十月', '十一月',
'十二月' ],
weekdays : [ '星期日', '星期一',
'星期二', '星期三',
'星期四', '星期五', '星期六' ],
printChart : '打印图表',
downloadPNG : '下载JPEG 图片',
downloadJPEG : '下载JPEG文档',
downloadPDF : '下载PDF 图片',
downloadSVG : '下载SVG 矢量图',
contextButtonTitle : '下载图片'
}
});
注意rangeSelector和series的参数设置