HighCharts 根據spline-plot-bands圖，定制自己的圖(區間里顯示多個數據)

公司項目里有這樣一個需求，根據數據繪圖，但是數據很多，不可能每個點每個點的去畫，這樣顯示的數據太密集非常的難看(更顯得技術不專業)，如圖：

所以我和項目經理商量如何顯示這個圖形，按照他的意思是，按照范圍來顯示這一段區域內的數據，所以我們覺得使用spline-plot-bands圖，另辟蹊徑，但是遇到一個問題：區域是顯示了，但是從數據庫里選取的數據只有y坐標的值，沒有和x坐標對應起來，這樣就造成了y軸數據和x軸數據不對應。為了解決這個問題，我開始想辦法，項目經理說：“可能這個圖形不支持這樣的功能”，但是我想了一下，不對，highcharts這么強大怎么可能不支持，可能是我們想的有問題，然后我開始查看highcharts的api，通過查看api看看xAxis到底能不能放與y軸對應的時間數據(注：之前使用的圖是使用xAxis對象里的categories[這里存放數據]，但是用spline-plot-bands圖形好像不支持這樣放數據)，然后查看type屬性的datetime的圖形的demo，通過這個例子發現，data數據格式是個二維數組：

data: [
               [Date.UTC(2010, 0, 1), 29.9],
               [Date.UTC(2010, 0, 2), 71.5],
               [Date.UTC(2010, 0, 3), 106.4],
               [Date.UTC(2010, 0, 6), 129.2],
               [Date.UTC(2010, 0, 7), 144.0],
               [Date.UTC(2010, 0, 8), 176.0]
            ]

而之前我使用的是一維數組，而且，這樣就解決了x,y軸數據不對應問題了，這樣一來，x,y軸對應起來又有了數據的范圍划分了，漂亮！^_^，但是行不行呢，我還要測試。

var Year = 0;
var Month = 0;
var Day = 0;
var H = 0;
var M = 0;
var S = 0;
$(function () {
    bindYxbh();
    initChart();
});
var obj = {
    //去掉highcharts.com商標
    credits: {
        enabled: false
    },
    //去掉chart不必要屬性
    exporting: {
        enabled: false
    },
    chart: {
        type: 'spline'
    },
    title: {
        text: '單體電壓分析圖'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: '電壓(v)'
        }
    },
    tooltip: {
        valueSuffix: 'v'
    },
    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            pointInterval: 20000, // 10分鍾

            pointStart: Date.UTC(Year, Month, Day, H, M, S)
        }
    },
    series: [{
        name: '單體電壓',
        data: []
    }],
    navigation: {
        menuItemStyle: {
            fontSize: '10px'
        }
    }
};

function initChart() {
    $('#container').highcharts(obj);
}

function bindYxbh() {
    zwobj.url = '../../WebService/AnalysisChartService.ashx?action=QueryAllYxbh';
    ajaxData();
}

function ajax_QueryAllYxbh(data) {
    if (data == null) {
        return;
    }
    var len = data.Data.length;
    for (var i = 0; i < len; i++) {
        if (data.Data[i].yxbh != null) {
            $("#pile").append("<option value='" + data.Data[i].yxbh + "'>" + data.Data[i].yxbh + "</option>");
        }

    }
}

function search() {
    var kssj = $("#begintime").val();
    var skssj = kssj.split(' ');
    Year = skssj[0].split('-')[0];
    Month = skssj[0].split('-')[1];
    Day = skssj[0].split('-')[2];

    H = skssj[1].split(':')[0];
    M = skssj[1].split(':')[1];
    S = skssj[1].split(':')[2];
    var dt = $("#txt_dt").val();
    var yxbh = $("#pile").val();
    if (kssj.length <= 0 || dt.length <= 0) {
        $.messager.alert("提示", "請輸入單體或選擇查詢時間！", "info");
        return;
    }

    zwobj.url = '../../WebService/AnalysisChartService.ashx?action=QueryData';
    zwobj.data = { kssj: kssj, dt: dt, yxbh: yxbh };
    ajaxData();
}

function ajax_QueryData(data) {
    if (data == null) {
        return;
    }
    var len = data.Data.length;
    var z = [];

    for (var i = 0; i < len; i++) {
        var s = eval("new " + data.Data[i].sj.split('/')[1]).Format("yyyy-MM-dd hh:mm:ss");
        z.push([Date.UTC(
        s.split(' ')[0].split('-')[0],

        parseInt(s.split(' ')[0].split('-')[1])-1,

        s.split(' ')[0].split('-')[2],
        s.split(' ')[1].split(':')[0],
        s.split(' ')[1].split(':')[1],
        s.split(' ')[1].split(':')[2]), data.Data[i].dtdy]);
    }
    obj.series[0].data = z;
    obj.plotOptions.spline.pointStart = Date.UTC(Year, Month, Day, H, M, S);
    initChart();
}

通過測試發現完全可以^_^，截圖一張：

總結：

注意：Date.UTC時間轉換成月份要減去1。

通過這樣的代碼開發過程，感覺自己遇到問題解決問題更成熟了。