Highcharts: in verschiedenen Farben der Legende in einer Serie Histogramm

I Beispielcode für Frage hier: http://jsfiddle.net/pzamora/ztxPr/1/Highcharts: in verschiedenen Farben der Legende in einer Serie Histogramm

Ich habe verschiedene Farben in meiner Reihe, aber ich brauche sie in der Legende erscheinen

series: [{ name: 'V Genes', 
     data: 
     [ 
      { 
       count: 18320.0, 
       y: 0.92, 
       color: '#3D96AE' 
      }, 
      { 
       count: 1337.0, 
       y: 0.17, 
       color: '#3D96AE' 
      }, 
      { 
       count: 33970.0, 
       y: 1.71, 
       color: '#4572A7' 
      }, 
      { 
       count: 1221.0, 
       y: 1.06, 
       color: '#3D96AE' 
      }, 
      { 
       count: 22073.0, 
       y: 1.11, 
       color: '#4572A7' 
      }, 
      { 
       count: 8331.0, 
       y: 0.42, 
       color: '#3D96AE' 
      }, 
      { 
       count: 64974.0, 
       y: 3.27, 
       color: '#4572A7' 
      }, 
      { 
       count: 9532.0, 
       y: 0.48, 
       color: '#3D96AE' 
      }, 
      { 
       count: 18106.0, 
       y: 0.91, 
       color: '#4572A7' 
      } 
     ] 
    }]

..ich angepasst x Werte mit der Kategorie Position, aber ich bin nicht all meine Daten auf dem Chart

@jsfiddle angezeigt bekommen: http://jsfiddle.net/pzamora/phrP7/4/

Quelle

2012-12-19 pzamora

Je mehr ich sehe dieser die mehr verwirrt ich bin. Wie genau sollte das Diagramm aussehen? Das "TRBxxxx" Zeug scheint nicht wie etwas zu sein, das man teilen kann. Zum Beispiel, wenn Sie TRBV10-1 und TRBV10-1 (VB) hätten, könnte ich sehen, wohin Sie gehen. Gibt es Gemeinsamkeiten zwischen VB- und Nicht-VB-Elementen? Wenn nicht, warum chartern Sie sie zusammen? Wenn ja, erstellen Sie zwei Serien und verwenden Sie dann den Tooltip, um VB und Nicht-VB mit Legendenfarben anzuzeigen, um die 2 Punkte zu unterscheiden. – wergeld

Ich erwarte, dass ich dies bekommen http://uploadingit.com/file/view/d120kn4vwyu3b1bz/one_series.jpg – pzamora

@pzamora Nehmen Sie eine Beute meine aktualisierte Antwort, ich war über die sende meine Antwort auf die andere Frage, die Sie gefragt, wenn Sie gelöscht es. –

Sie könnten wie folgt vorgehen:

Split Daten in zwei Serien
hinzufügen color für die Legende in jeder Serie

hinzufügen x Parameter zu jedem Wert, so dass sie sich nicht überlappen

series: [{ name: 'X Genes', color: '#3D96AE', 
    data: 
    [ 
     { 
      count: 18320.0, 
      y: 0.92, 
      color: '#3D96AE', 
      x: 0 
     }, 
     { 
      count: 1337.0, 
      y: 0.17, 
      color: '#3D96AE', 
      x: 1 
     }, 
     { 
      count: 1221.0, 
      y: 1.06, 
      color: '#3D96AE', 
      x: 3 
     }, 
     { 
      count: 8331.0, 
      y: 0.42, 
      color: '#3D96AE', 
      x: 5 
     }, 
     { 
      count: 9532.0, 
      y: 0.48, 
      color: '#3D96AE', 
      x: 7 
     } 
    ] 
}, 
{ name: 'V Genes', color: '#4572A7', 
    data: 
    [ 
     { 
      count: 33970.0, 
      y: 1.71, 
      color: '#4572A7', 
      x: 2 
     }, 
     { 
      count: 22073.0, 
      y: 1.11, 
      color: '#4572A7', 
      x: 4 
     }, 
     { 
      count: 64974.0, 
      y: 3.27, 
      color: '#4572A7', 
      x: 6 
     }, 
     { 
      count: 18106.0, 
      y: 0.91, 
      color: '#4572A7', 
      x: 8 
     } 
    ] 
}]

Fügen Sie stacking: 'normal zuhinzu, so dass die Werte in der Mitte jeder Spalte stehen.

plotOptions: { 
     column: { 
      cursor: 'pointer', 
      stacking: 'normal' 
     } 
},

Quelle

2012-12-19 22:05:03 Lando

Ich bin glücklich mit den Farben, aber ich bekomme sie immer noch nicht in der Legende. Ich möchte die Daten in zwei Serien aufteilen und die fehlenden Daten mit leeren Werten füllen, um sie den Kategorien zuzuordnen. – pzamora

Ich dachte, du wolltest die Legende jedes Punktes färben. Ich habe die Antwort aktualisiert, um die von Ihnen gepostete Grafik wiederzugeben. Benötigen Sie das? – Lando

Die 'x' Position teilt Ihnen die Reihenfolge mit, in der die Spalten erscheinen, d.h.' x: 0' ist die erste, 'x: 1' die zweite und so weiter. Da Sie zwei Reihen haben, könnten Sie zwei Spalten mit dem gleichen 'x' haben und sie würden zusammen angezeigt werden. – Lando

Eine Reihe in der Legende kann nur eine Farbe haben, während jeder Punkt in einer Reihe diese Farbe überschreiben kann (wie Sie es in Ihrem Code getan haben). Wenn Sie mehr Daten in Ihrer Legende möchten, können Sie Ihre einzelne Serie in mehrere mit den Codes, die Sie möchten, aufteilen. Es ist nicht vollständig klar, was Ihr erwartetes Ergebnis für diese Frage ist.

Quelle

2012-12-19 20:58:14 wergeld

Hier der Code mit 2 Serien http://jsfiddle.net/pzamora/phrP7/1/ Das Problem ist, dass meine X-Achse sind anders, die Werte aus jeder Serie stimmen nicht mit den xAxis – pzamora

Kategorien überein: ['TRBV10-1 ',' TRBV11-1 ',' TRBV11-3 ',' TRBV10-3 (Vb12) ',' TRBV11-2 (Vb 21.3) ',' TRBV12-3 (Vb8) '] Ich habe zwei Arten von xAxis-Werten, die mit Klammern, und die anderen, wollen nur einen Unterschied machen, wenn ich zwei Reihen verwende, werden die Werte in xAxis niemals in jeder Reihe übereinstimmen – pzamora

Deshalb ist mein Grund, eine Reihe zu verwenden, alle x-Werte anders wollen nur darauf hinweisen, dass einige von ihnen eine spezielle Beschreibung haben – pzamora

Für jede Legende Element Sie eine Serie erstellen haben.
Also, wenn Sie zwei Elemente wollen, müssen Sie 2 Serien erstellen.
Dann müssen Sie den x Wert für jeden Punkt festlegen, um den Spaltenstapel in der Kategorie zu machen.

demo

Also, wenn ich die folgende Kategorie haben:

['first', 'second', 'third']

Meine Serie haben folgende Daten haben:
Serie1: [{count: 400, y: 10, x: 1}]
serie2: [{count: 300, y: 5, x: 0}, {count: 500, y: 15, x: 2}]

Diese Fallserie 1 erscheint auf second und Serie 2 auf first und third.

demo

Referenz

Serie data

aktualisieren:

aktualisiert, weil sie ein Problem mit den Kategorien ist. Es passiert, weil der x Wert ein integer und kein string sein muss.

{ 
    y: 40, 
    x: 2, 
    count: 300 
}

demo

Quelle

2012-12-19 23:37:01

series: [{ name: 'X Genes', color: '#3D96AE', 
     data: 
     [ 
      { 
       count: 18320.0, 
       y: 0.92, 
       x: 0 
      }, 
      { 
       count: 1337.0, 
       y: 0.17, 
       x: 1 
      }, 
      { 
       count: 1221.0, 
       y: 1.06, 
       x: 3 
      }, 
      { 
       count: 8331.0, 
       y: 0.42, 
       x: 5 
      }, 
      { 
       count: 9532.0, 
       y: 0.48, 
       x: 7 
      } 
     ] 
    }, 
    { name: 'V Genes', color: '#4572A7', 
     data: 
     [ 
      { 
       count: 33970.0, 
       y: 1.71, 
       x: 2 
      }, 
      { 
       count: 22073.0, 
       y: 1.11, 
       x: 4 
      }, 
      { 
       count: 64974.0, 
       y: 3.27, 
       x: 6 
      }, 
      { 
       count: 18106.0, 
       y: 0.91, 
       x: 8 
      } 
     ] 
    }]

Sie benötigen keine Farbattribute für jeden Punkt angeben, wenn Sie es für die Serien angeben.

JsFiddle Demo

Quelle

2012-12-20 09:30:13

Highcharts: in verschiedenen Farben der Legende in einer Serie Histogramm

Antwort

Verwandte Themen