同一系列上的多列。 Highchart

Question

我想要一个代表这样数据的图表。

系列代码就是这样的。

series: [{ name: 'Car 1', data: [[1, 3], [4, 6], [7, 9]] }, { name: 'Car 2', data: [[2, 3], [8, 10], [12, 18]] }]

每个数组的第一个数字是起点，第二个数字是结束点，主数组中的所有数组都在同一行。

Answer 1

倒置的列范围图表应该有效。您的数据格式不会与您想要的方式一致，但转换它并不困难。如果您不熟悉所显示的数据格式，则只需要一个x，low和high的点对象。

例如：

{
    x: 1,
    low: 0,
    high: 4
}

以下按照正确的格式按摩您当前的结构：

$(function () {

    var series = [{
        name: 'Car 1',
        data: [
            [1, 3],
            [4, 6],
            [7, 9]
        ]
    }, {
        name: 'Car 2',
        data: [
            [2, 3],
            [8, 10],
            [12, 18]
        ]
    }, {
        name: 'Car 3',
        data: [
            [5, 9],
            [1, 2]
        ]
    }];

    // massage the data
    var data = [];
    for(var i=0;i<series.length;i++) {
        for(var j=0;j<series[i].data.length;j++) {
             data.push({
                 x: j, 
                 low: series[i].data[j][0],
                 high: series[i].data[j][1],
                 name: series[i].name
             });
        }
    }

    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        legend: {
            enabled: false
        },

        series: [{
            name: 'Cars',
            data: data
        }]

    });

});

http://jsfiddle.net/hqwrx4uy/