Serie als Spalten in highcharts

Question

Ich versuche, in sehr grundlegenden Säulendiagramm zu rendern, wo jede Reihe in Spalte selbst ist. Ich kann es fast schaffen, wenn es jede Spalte innerhalb der Reihe setzt []. Data Hier ist ein jsFiddle, wo die Stäbe korrekt sind, aber die Legende sollte das selbe wie die Spaltennamen (Alla und Firma) zeigen.

https://jsfiddle.net/rsL1tza2/

series: [{ 
     data: [{ 
      name: 'Alla', 
      y: 76.9, 
      color: '#003960' 
     }, 
     { 
      name: 'Company', 
      y: 77.2, 
      color: '#006bb6' 
     }] 
    }] 

Answer 1

Ihre aktuelle Datenstruktur gibt nur eine einzige Serie.

Sie benötigen series Eigenschaften aus dem data Array zu bewegen, und geben Sie sie als zwei separate Serie, wie folgt aus:

series: [{ 
    name: 'Alla', 
    color: '#003960', 
    data: [76.9] 
    }, { 
    name: 'Company', 
    color: '#006bb6', 
    data: [77.2] 
    }] 

Diese andere Probleme mit der x-Achse Etikett führen können, die Sie möchten Adresse, aber das ist ein anderes Problem.

Beispiel:

• https://jsfiddle.net/rsL1tza2/1/

Obwohl, wenn Sie Ihre Daten wirklich so einfach ist, ist es viel besser für die Benutzerfreundlichkeit ist die Stäbe direkt auf der x-Achse zu beschriften, anstatt in einer Legende , wo der Benutzer von der Legende zu den Balken hin und her schauen und die Farben abstimmen muss. FWIW.

EDIT

Wenn Sie die Seriennamen in beiden Etikett der Achse angezeigt werden sollen und die Legende, müssen Sie die Dinge ein wenig anders zu tun.

1) Stellen Sie grouping auf false in Ihrer plotOptions

2) Geben Sie Ihre categories, setzen oder die name in beiden series Eigenschaften und die data Punkt

3) angeben, ein x für jeden Daten Punkt.

Achse:

xAxis: { 
    categories: ['Alla', 'Company'], 
    } 

Plot Optionen:

plotOptions: { 
    column: { 
     grouping: false 
    } 
    } 

Serie:

series: [{ 
    name: 'Alla', 
    color: '#003960', 
    data: [[0,76.9]] 
    }, { 
    name: 'Company', 
    color: '#006bb6', 
    data: [[1,77.2]] 
    }] 

Fiddle:

• https://jsfiddle.net/rsL1tza2/4/

Answer 2

Sie haben name aus data Bereich zu halten:

https://jsfiddle.net/0kfmqnu4/

series: [{ 
     name: 'Alla', 
     data: [76.9] 
    }, { 
     name: 'Company', 
     data: [77.2] 
    }]