So erstellen Sie eine einzelne Reihe Balkendiagramm mit Highcharts

Ich bin versucht, zu erstellen eine einfache Highcharts bar-graph mit einer einzelnen Reihe und mehreren labels in der Legende. Wie wird das gemacht?

Hier ist ein Beispiel:

    $('#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'}
            ]
        }
    ],

});

jsfiddle ist nicht mehr verfügbar.

InformationsquelleAutor jwerre | 2015-05-04

highcharts

5

Glücklicherweise, Highcharts ist ziemlich flexibel.
Wir können tun, einige tricks (vielleicht hacks?) erreichen diese Art der "nicht-convential" Aufgaben.

Was Sie tun können, in Ihrem Fall ist das erstellen von "fake" serieses, und verwenden Sie benutzerdefinierte Ereignis-Handler:
```
    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'}

    ],
```
Damit formatieren Sie die Legende Etiketten, die wir verwenden können labelFormatter für die Legende:
```
    legend: {
        labelFormatter: function(){
            return names[this.index-1];
        }
    },
```
damit wird die Legende-label auf den Namen der entsprechenden Stelle.

Und schließlich müssen wir behandeln die Legende klicken, um zu imitieren, das "normale" Verhalten:
```
    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});
                }
            }
        }
    },
```
Dies sind nur Beispiele, Sie können offensichtlich verbessern und anpassen, um Ihren eigenen Bedarf.

Glück!

http://jsfiddle.net/otm0oq2c/3/
- Danke @MorKadosh. Aber warum tun Sie sagen, das ist unkonventionell. Es scheint so, das wäre die einfachste Möglichkeit, dies zeigen die Daten. Fühlen Sie sich dort eine bessere Möglichkeit, um Daten anzuzeigen, die aussieht wie die oben genannten?
- Der Grund, warum ich sagte, dass ist, weil diese Funktionalität nicht "out of the box", aber es gibt nichts schlechtes über das tun dies, das ist, warum Ihre API ist ziemlich flexibel.
- Oh geez, Sie haben zu gehen durch alle, die um ein einfaches Balkendiagramm?
InformationsquelleAutor MorKadosh

Einen einfacheren Weg als die akzeptierte Antwort ist, indem die categories Schlüssel als array von 'labels' und die series.data als ein array "Werte".

Hier ist ein Beispiel, verwendet eine Sammlung (Array von Objekten) oder ein flaches Objekt zum füllen eines Balkendiagramms in Highcharts (jsfiddle):

Im Beispiel wird ein array von Objekten mit den Schlüsseln name/Wert oder ein einfaches Objekt mit Schlüssel/Wert:

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
});

InformationsquelleAutor Damon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.