2. JS實現（需要根據後臺資料進行解析）

$.ajax({
        type: "POST",
        cache: false,
        dataType: "json",
        url: g_pageName,
        data: {"code": "OPHS_24h_Bl_stat"},
        success: function (data) {
            var json = eval(data); //陣列
            // 生成表格資料
            function randomBar(date, y1) {
                return {
                    t: date.valueOf(),
                    y: y1
                };
            }
            var dateFormat = 'YYYY-MM-DD HH:mm:ss';
            var date = moment(json[0][0], dateFormat);
            var likesd = [randomBar(date, json[1][0])];
            var likesf = [randomBar(date, json[2][0])];
            var likesr = [randomBar(date, json[3][0])];
            var likess = [randomBar(date, json[4][0])];
            var likesp = [randomBar(date, json[5][0])];
            var likesy = [randomBar(date, json[6][0])];
            var labels = [date];
            for(var j=1; j<json[0].length-1; j++) {
                date = date.clone().add(1, 'hour');
                likesd.push(randomBar(date, json[1][j]));
                likesf.push(randomBar(date, json[2][j]));
                likesr.push(randomBar(date, json[3][j]));
                likess.push(randomBar(date, json[4][j]));
                likesp.push(randomBar(date, json[5][j]));
                likesy.push(randomBar(date, json[6][j]));
                labels.push(date);
            }

            var cfg = {
                labels: labels,
                type: 'line',
                datasets: [{
                    label: '目錄告警',
                    data: likesd,
                    type: 'line',
                    borderColor: window.chartColors.yellow,
                    backgroundColor: window.chartColors.yellow,
                    pointRadius: 1,
                    fill: false,
                    lineTension: 0.5,
                    borderWidth: 1

                }, {
                    label: '檔案告警',
                    data: likesf,
                    type: 'line',
                    borderColor: window.chartColors.blue,
                    backgroundColor: window.chartColors.blue,
                    pointRadius: 1,
                    fill: false,
                    lineTension: 0.5,
                    borderWidth: 1
                }, {
                    label: '登錄檔告警',
                    data: likesr,
                    type: 'line',
                    borderColor: window.chartColors.green,
                    backgroundColor: window.chartColors.green,
                    pointRadius: 1,
                    fill: false,
                    lineTension: 0.5,
                    borderWidth: 1
                }, {
                    label: '服務告警',
                    data: likess,
                    type: 'line',
                    borderColor: '#669999',
                    backgroundColor: '#669999',
                    pointRadius: 1,
                    fill: false,
                    lineTension: 0.5,
                    borderWidth: 1
                }, {
                    label: '程序告警',
                    data: likesp,
                    type: 'line',
                    borderColor: '#99cccc',
                    backgroundColor: '#99cccc',
                    pointRadius: 1,
                    fill: false,
                    lineTension: 0.5,
                    borderWidth: 1
                }, {
                    label: '系統防篡改告警',
                    data: likesy,
                    type: 'line',
                    borderColor: '#4A708B',
                    backgroundColor: '#4A708B',
                    pointRadius: 1,
                    fill: false,
                    lineTension: 0.5,
                    borderWidth: 1
                }]
            };
            // var chart = new Chart(ctx, cfg);
            var ctx = document.getElementById('doChart1').getContext('2d');
            ctx.canvas.width = 1000;
            ctx.canvas.height = 350;
            window.myLine = Chart.Line(ctx, {
                data: cfg,
                options: {
                    animation: false,
                    responsive: true,
                    hoverMode: 'index',
                    stacked: false,
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            boxWidth: 13,
                        }
                    },
                    /*title: {
                        display: true,
                        text: '過去24小時告警'
                    },*/
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '時間'
                            },
                            type: 'time',
                            time: {
                                displayFormats: {
                                    minute: 'DD'+'日'+'HH'+'點',
                                },
                                tooltipFormat: 'YYYY'+'年'+'MM'+'月'+'DD'+'日'+'HH'+'點',
                            },
                            distribution: 'series',
                            ticks: {
                                source: 'labels'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '告警次數'
                            },
                            type: 'linear', //only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            gridLines: {
                                opacity: 0.5,
                                lineWidth: 0.5
                            },
                        }],
                    }
                }
            });

        },
        error: function(xhr, errmsg, err) {
            console.log(xhr.status + ": " + xhr.responseText);
        }
    });