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。

通过这样的代码开发过程，感觉自己遇到问题解决问题更成熟了。

转载于:https://www.cnblogs.com/zhangwei595806165/p/3711383.html