How to create a single series bar graph with Highc

问题:

I'm trying to create a simple Highcharts bar graph with a single series and multiple labels in the legend. How is this done?

Here is an example:

    $('#container').highcharts({

    chart: {
        type: 'bar',
    },
    legend: {
        enabled: true,
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        labelFormatter: function() {
            return this.name + " - <span class='total'>"+this.y+"</span>"
        }
    },
    title: {
        text: 'Simple Bar Graph'
    },
    xAxis: {
        categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
        allowDecimals: false
    },
    yAxis: {
        allowDecimals: false
    },

    series: [
        {
            data: [
                {y: 6, name: 'First', color: 'blue'},
                {y: 7, name: 'Second', color: 'green'},
                {y: 9, name: 'Third', color: 'yellow'},
                {y: 1, name: 'Fourth', color: 'orange'},
                {y: 1, name: 'Fifth', color: 'red'}
            ]
        }
    ],

});

回答1:

Luckily, Highcharts is pretty flexible. We can do some tricks (maybe hacks?) to achieve this kind of "non-convential" tasks.

What you could do in your case is create "fake" serieses, and use custom event handlers:

    series: [
        {
            pointWidth:20,
            color: colors[0],
            showInLegend:false,
            data: [
                {y: 6, name: 'First', color: colors[0]},
                {y: 7, name: 'Second', color: colors[1]},
                {y: 9, name: 'Third', color: colors[2]},
                {y: 1, name: 'Fourth', color: colors[3]},
                {y: 1, name: 'Fifth', color: colors[4]}
            ]
        },
        {color: 'blue'},
        {color: 'green'},
        {color: 'yellow'},
        {color: 'orange'},
        {color: 'red'}

    ],

In order to format the legend labels we can use labelFormatter for the legend:

    legend: {
        labelFormatter: function(){
            return names[this.index-1];
        }
    },

this will set the legend label to the name of the corresponding point.

And finally we need to handle the legend click, to imitate the "normal" behaviour:

    plotOptions: {
        series: {
            events: {
                legendItemClick: function (x) {
                    var i = this.index  - 1;
                    var series = this.chart.series[0];
                    var point = series.points[i];   

                    if(point.oldY == undefined)
                       point.oldY = point.y;

                    point.update({y: point.y != null ? null : point.oldY});
                }
            }
        }
    },

These are just examples, you can obviously improve this and adjust to your own need.

Good Luck!

http://jsfiddle.net/otm0oq2c/3/

回答2:

A simpler way than the accepted answer is by setting the categories key as an array of 'labels' and the series.data as an array of 'values'.

Here is an example that uses a collection (Array of objects) or a flat object to populate a bar chart in Highcharts (jsfiddle):

The example assumes a an array of objects with keys name/value, or a simple object of key/value:

var chart = Highcharts.chart('container', {

    title: {
        text: 'Simple Bar'
    },

    chart: {type: 'bar'},

     xAxis: {
     // categories: Object.keys(obj)
     // or
        categories: collection.map(i => i.name)
    }, 

        series: [{
        name: 'Usage',
        colorByPoint: true,
     // data: Object.values(obj)
     // or:
        data: collection.map(i => i.value)
    }],
    legend: false
});