0

我有一个使用 highcharts 显示的图表[x,y]。我想使用的比[x,y]我在数组中指定时使用的多minimum value, maximum value。我有一个这样的数组：array1[['apples',no of apples,11,12],['oranges',no of oranges,1,2]

我如何在下面的图表中使用这个数组？我知道我必须array1在系列选项中指定这一点。但是我应该使用哪个图表？[x,y]当上面定义的数组中有多个选项时，我如何表示图表中的点。

$(document).ready(function fruits() {
    $('#container').highcharts({
        title: {
            text: 'fruits'
        },

        xAxis: {
            categories: ['Apple', 'Orange']
        },

        yAxis: {
            title: {
                text: 'No of fruits'
            },
            tickInterval: 10
        },

        series: [{
            name: 'Fruits',
            data: [
                ['apple', 29.9],
                ['orange', 71.5]
            ]

        }]
    });
});

例如，如果我使用柱形范围图，我在同一点下有最小值和最大值。但我不需要水果、平均值和中位数也包含在同一张图表中。我不想为平均值和中位数画一条单独的线，而是为每个点使用一条线，显示没有水果、最小值、最大值、中值在工具提示中。我希望数据为 [apple,5,4,12.5,10] $(function () {

$('#container').highcharts({

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

    title: {
        text: 'Temperature variation by month'
    },

    subtitle: {
        text: 'Observed in Vik i Sogn, Norway, 2009'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
        title: {
            text: 'Temperature ( °C )'
        }
    },

    tooltip: {
        valueSuffix: '°C'
    },

    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.y + '°C';
                }
            }
        }
    },

    legend: {
        enabled: false
    },

    series: [{
        name: 'Min and Max',
        data: [
            [-9.7, 9.4],
            [-8.7, 6.5],
            [-3.5, 9.4],
            [-1.4, 19.9],
            [0.0, 22.6],
            [2.9, 29.5],
            [9.2, 30.7],
            [7.3, 26.5],
            [4.4, 18.0],
            [-3.1, 11.4],
            [-5.2, 10.4],
            [-13.5, 9.8]
        ]
    }

                   ]


            ]

});

});

4

4 回答 4

0

我认为您正在寻找的东西称为columnrange图表。

于 2013-10-07T19:19:21.760 回答
0

如果您只想在图表上使用一条线，并且只在工具提示中显示所有详细信息，您可以简单地将点作为对象，然后格式化工具提示，请参阅：http: //jsfiddle.net/3bQne/566/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['apple', 'banana']
    },
    tooltip: {
        formatter: function() {
            var o = this.point.options;

            return this.x + '<br>' +
                this.series.name + '<br>' +
                'Count: ' + this.y + '<br>' +
                'Min: ' + o.min + '<br>' +
                'Max: ' + o.max + '<br>' +
                'Mean: ' + o.mean + '<br>' +
                'Median: ' + o.median + '<br>';
        }
    },
    series: [{

        data: [{
            x: 0,
            y: 5,
            min: 10,
            max: 15,
            median: 13.4,
            mean: 12.1
        },{
            x: 1,
            y: 6,
            min: 13,
            max: 16,
            median: 13.4,
            mean: 15.2
        }]        
    }]
});
于 2013-10-08T12:43:14.550 回答
0

我认为将所有数据放在一个点上并不是一个好主意。但是Error Bar或者Box plot可能适合您的需要。这是箱线图的示例。这不完全是你想要的，但它很接近。http://jsfiddle.net/7kFh4/

于 2013-10-07T23:26:50.880 回答
0

您需要两个类别，然后是两个系列，如下所示：

        xAxis: {
            categories: ['Apples', 'Oranges'],
            title: {
                text: null
            }
        },
        series: [{
            name: 'Min',
            data: [11, 12]
        }, {
            name: 'Max',
            data: [20, 24]
        }]

这是一个示例小提琴：http: //jsfiddle.net/UZj2K/

于 2013-10-07T18:25:08.087 回答