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
        });
    }