Highcharts Erstellen von Legenden basierend auf dem Wert von Punkten

Question

Ich weiß genau, wie die Legende in Highcharts, aber das Problem ist, wie Legenden basierend auf dem Wert der Punkte aus der gleichen Serie erstellt, da jede Legende verwendet wird eine Serie (eine Sammlung von Punkten) symbolisieren.

Es gibt ein Bild (Diagrammtyp: Wasserfall) ich in excel zeichnen unten zeigt, was ich will, kann man deutlich, dass orange Farbe Legende steht für die Gewinnung sehen, während blaue für Verlust steht, aber wie ich Erreichen Sie dies in Highcharts?

Ich habe viel gesucht, aber endete mit Enttäuschung, bitte helfen.

Answer 1

Eine Möglichkeit, dies zu tun, ist mit einer Dummy-Serie.

Eine Extra-Serie, mit dem Namen und die Farbe, die Sie, mit einem leeren Datenfeld wollen:

series: [{ 
    name: 'Actual Series', 
    data: [...data, with points colored as needed...] 
}, { 
    grouping: false, 
    name: 'Dummy Series', 
    color: 'chosen color', 
    data: [] 
}] 

Sie werden auch grouping-false setzen wollen, so dass die Dummy-Serie nicht braucht up extra Leerzeichen auf der Handlung.

Fiddle:

• http://jsfiddle.net/jlbriggs/vjd3p4s0/

(, auch die gleiche Sache, die Wasserfall-Demo mit:http://jsfiddle.net/jlbriggs/7vtbzh53/)

Ein anderer Weg, dies zu tun, wäre eine eigene Legende zu schaffen , außerhalb des Diagramms.

In beiden Fällen verlieren Sie die Funktionalität, indem Sie auf die Legende klicken, um die Reihe der orangefarbenen Spalten ein-/auszublenden. Sie müssten eine komplexere Funktion erstellen, um die Daten unter legendItemClick zu bearbeiten, wenn diese Fähigkeit für Sie wichtig ist.

Answer 2

Lösung für die bearbeitete Frage. Sie können Ihre Daten zwei Serien zuordnen und die Stapelung auf "normal" setzen.

const data = [10, 20, -10, 20, 10, -10]; 
const dataPositive = data.map(v => v >= 0 ? v : 0); 
const dataNegative = data.map(v => v < 0 ? v : 0); 

const options = { 
    chart: { 
    type: 'column' 
    }, 
    series: [{ 
    color: 'blue', 
    data: dataPositive, 
    stacking: 'normal' 
    }, { 
    color: 'orange', 
    data: dataNegative, 
    stacking: 'normal' 
    }] 
} 

const chart = Highcharts.chart('container', options); 

anschauliches Beispiel: https://jsfiddle.net/j2o5bdgs/

[EDIT]

Lösung für Grafik Wasserfall:

const data = [10, 20, -30]; 
const colors = Highcharts.getOptions().colors; 

const options = { 
    chart: { 
    type: 'waterfall' 
    }, 
    series: [{ 
    // Single series simulating 2 series 
    data: data.map(v => v < 0 ? { 
     y: v, 
     color: colors[0] 
    } : { 
     y: v, 
     color: colors[3] 
    }), 
    stacking: 'normal', 
    showInLegend: false 
    }, { 
    // Positive data serie 
    color: colors[3], 
    data: [10, 20, 0], 
    visible: false, 
    stacking: 'normal', 
    showInLegend: false 
    }, { 
    // Negative data serie 
    color: colors[0], 
    data: [0, 0, -30], 
    visible: false, 
    stacking: 'normal', 
    showInLegend: false 
    }, { 
    // Empty serie for legend item 
    name: 'Series 1', 
    color: colors[3], 
    stacking: 'normal', 
    events: { 
     legendItemClick: function(e) { 
     const series = this.chart.series; 
     const invisibleCount = document.querySelectorAll('.highcharts-legend-item-hidden').length; 
     if (this.visible) { 
      if (invisibleCount === 1) { 
      series[0].hide(); 
      series[1].hide(); 
      series[2].hide(); 
      } else { 
      series[0].hide(); 
      series[2].show(); 
      } 
     } else if (invisibleCount === 2) { 
      series[0].hide(); 
      series[1].show(); 
     } else { 
      series[0].show(); 
      series[2].hide(); 
     } 
     } 
    } 
    }, { 
    // Empty serie for legend item 
    name: 'Series 2', 
    color: colors[0], 
    stacking: 'normal', 
    events: { 
     legendItemClick: function(e) { 
     const series = this.chart.series; 
     const invisibleCount = document.querySelectorAll('.highcharts-legend-item-hidden').length; 
     if (this.visible) { 
      if (invisibleCount === 1) { 
      // hide all 
      series[0].hide(); 
      series[1].hide(); 
      series[2].hide(); 
      return; 
      } 
      series[0].hide(); 
      series[1].show(); 
     } else { 
      if (invisibleCount === 2) { 
      series[0].hide(); 
      series[2].show(); 
      return; 
      } 
      series[0].show(); 
      series[1].hide(); 
     } 
     } 
    } 
    }] 
} 

const chart = Highcharts.chart('container', options); 

anschauliches Beispiel: https://jsfiddle.net/2uszoLop/