如何使用javascript添加Highcharts低和高数据系列

Question

我试图使用highcharts创建一个代表我们商店的时间表的图表。有了这个，我使用列范围到商店开放的开始和结束时间。

但我仍然坚持如何使用array和json推送这些数据。 这就是我想要实现的目标。我用硬编码数据制作了这个模型;

JSFIDDLE: http://jsfiddle.net/rds_a/Lscqugbp/3/

code:
    $(function () {

    window.chart1 = new Highcharts.Chart({

        chart: {
            renderTo: 'container1',
            type: 'columnrange',
            inverted: false
        },

        title: {
            text: "Store Schedule"
        },

        xAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Yesterday','Today']
        },

        yAxis: {
            min: 0,
            max: 24,
            categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
            title: {
                text: 'Time'
            }
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            columnrange: {
                grouping: false
            }
        },

        series: [{
            name: 'Open',
            stack: 'OnSite',
            color: 'orange',
            data: [{
                x: 0,
                low: 7,
                high: 10
            },{
                x: 0,
                low: 11,
                high: 16
            },{
                x: 1,
                low: 6,
                high: 12
            },{
                x: 1,
                low: 17,
                high: 21
            }]
        },
            {
            name: 'Close',
            stack: 'OnSite',
            color: 'black',
            data: [
                {
                x: 0,
                low: 01,
                high: 07
            },{
                x: 0,
                low: 10,
                high: 11
            },
                ,{
                x: 0,
                low: 15,
                high: 24
            },
            {
                x: 1,
                low: 1,
                high: 7
            },
            {
                x: 1,
                low: 12,
                high: 17
            },
                 {
                x: 1,
                low: 21,
                high: 24
            }]
                 }]

    });    
});

虽然这是我现在所拥有的;

JSFIDDLE: http://jsfiddle.net/rds_a/9P5fC/485/

code:

 $(function () {
    var jdata = {
        "Open": {
        "y": [4,8],
        "name": "Open",
        "n": [0]
        },
        "Closed": {
        "y": [9,12],
        "name": "Closed",
        "n": [1]
        }
    };

    var seriesArr = [];
    $.each(jdata, function (key, data) {
        var series = {
            name: key,
            data: []
        };

        $.each(data.y, function (index, value) {
            series.data.push({
                y: value
            });
        });

        $.each(data.n, function (index, value) {
            series.data[index].n = value;
        });
        seriesArr.push(series);
    });

    var options = {
        chart: {
            renderTo: 'container',
            type: 'column',
            inverted: false
        },
        title: {
            text: 'Store Schedule'
        },
        xAxis: {
            categories: ['Monday', 'Tuesday']
        },
        yAxis: {
            min: 0,
            max: 24,
            categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
            title: {
                text: 'Time'
            }
        },

        legend: {
            enabled: true
        },

           plotOptions: {
            columnrange: {
                stacking: 'percent'
            }
        },

        series: seriesArr
    };


    var chart = new Highcharts.Chart(options);

});

提前感谢能够提供意见的人。