I'm trying to use highcharts to display a series of points not just x and y

问题

I have a chart that displays [x,y] using highcharts .I want to use more than [x,y] when I specify in an array say minimum value, maximum value. I have an array like this: array1[['apples',no of apples,11,12],['oranges',no of oranges,1,2]

How do I employ this array in my following chart? I understand I have to specify this array1 in the series option. But which chart should I use? How do I represent the point in the chart when it has more than [x,y] option in the array defined as above.

$(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]
            ]

        }]
    });
});

For example,if i use column range chart I have min and max values under the same point. But I need no of fruits, mean and median also to be included in the same chart.I don want to draw a separate line for mean and median instead use a single line for each point that shows no of fruits,min,max,median inthe tool tip.I want data to be [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]
        ]
    }

                   ]


            ]

});

});

回答1:

You need two categories and then two series, like this:

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

Here's an example fiddle: http://jsfiddle.net/UZj2K/

回答2:

I think what you are looking for is called a columnrange chart.

回答3:

I don't think it's a good idea to put all the data in a single point. But Error Bar or Box plot might fit your need. Here is an example of box plot chart. It's not exactly what you want but it's close. http://jsfiddle.net/7kFh4/

回答4:

If you want to use only one line on a chart, and just display all detailed info only in tooltip, you can simple pass point as object, and then format tooltip, see: 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
        }]        
    }]
});

来源：https://stackoverflow.com/questions/19231663/im-trying-to-use-highcharts-to-display-a-series-of-points-not-just-x-and-y