HighCharts基本配置

一、数据格式：

X：

var keys=['2016-08-27','2016-08-28','2016-08-29','2016-08-30','2016-08-31','2016-09-01','2016-09-02','2016-09-03','2016-09-04',

'2016-09-05','2016-09-06','2016-09-07','2016-09-08','2016-09-09','2016-09-10','2016-09-11','2016-09-12','2016-09-13','2016-09-14',

'2016-09-15','2016-09-16','2016-09-17','2016-09-18','2016-09-19','2016-09-20','2016-09-21','2016-09-22','2016-09-23','2016-09-24','2016-09-25'];

Y：

var values=[{name:'Video Count',data:[{'color':'green','y':357318687},{'color':'green','y':374768986},{'color':'#FFF8DC','y':363966242},{'color':'green','y':374958474},{'color':'green','y':384873986},{'color':'green','y':348005802},{'color':'green','y':155823469},{'color':'#FFF8DC','y':381602070},{'color':'green','y':345064529},{'color':'green','y':332543312},{'color':'green','y':364899537},{'color':'green','y':355528369},{'color':'green','y':356719116},{'color':'green','y':337720967},{'color':'green','y':357095844},{'color':'green','y':361397533},{'color':'green','y':355986738},{'color':'green','y':328120062},{'color':'green','y':333631465},{'color':'green','y':339599611},{'color':'green','y':350420173},{'color':'green','y':389169929},{'color':'green','y':359508475},{'color':'#FFF8DC','y':339172458},{'color':'green','y':363952868},{'color':'green','y':371347803},{'color':'green','y':363094472},{'color':'#FFF8DC','y':380361018},{'color':'green','y':381423362},{'color':'#FFF8DC','y':0}]}];

二、显示：

function OverViewChart(xAxisData, yAxisData, container) {
$('.' + container).highcharts({
title: {
text: ""
},
subtitle: {
text: 'Source: Cosmos'
},
xAxis: {
categories: xAxisData
},
yAxis: {
title: {
text: 'Video Watch OverView'
},
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
lang: {
noData: "No data was found"
},
plotOptions: {
series: {
events: {
click: function (event) {
},
legendItemClick: function (event) {

}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:{point.y}</td>' +
'</tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
//labelFormat: '<span style="{color}">{name}</span>',
useHTML: true,
labelFormatter: function () {
return '<span data-toggle="tooltip" data-placement="bottom" title="鼠标移动时候显示的消息">' + this.name + '</span>';
}
},
series: yAxisData
});
}