ポイントの値に基づいて凡例を作成する方法

Question

Highchartsで凡例を有効にする方法は正確にわかっていますが、凡例が使用されるたびに同じシリーズのポイントの値に基づいて凡例を作成する方法が問題ですシリーズ（ポイントの集合）を象徴する。

ありますが、画像（チャートタイプ：滝）である私は、私が欲しいものを示す下のExcelで描く、あなたは青いのは損失を表しますが、どのように私は一方でオレンジ色の伝説は、獲得のために立っていることをはっきりと見ることができますHighchartsでこれを達成する？

私は多くを検索しましたが、失望して終了しました。お手伝いをしてください。

Answer 1

これを行う1つの方法は、ダミーシリーズです。

空のデータアレイと、あなたが名前と色で、余分なシリーズを作成します。

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

をダミーシリーズがかからないように、あなたはまた、falseにgroupingを設定することをお勧めしますプロット上に余分な空白スペースがあります。

フィドル：

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

（も、滝のデ​​モを使用して同じこと：http://jsfiddle.net/jlbriggs/7vtbzh53/）

これを行うための別の方法は、独自の凡例を作成することです、チャートの外側にあります。

いずれにしても、凡例をクリックするとオレンジ色の列の表示/非表示機能が失われます。その能力が重要である場合は、legendItemClickのデータを編集するより複雑な関数を作成する必要があります。

Answer 2

編集した質問の解決策。データを2つのシリーズにマッピングし、スタッキングを「通常」に設定することができます。

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

ライブ例： https://jsfiddle.net/j2o5bdgs/

[EDIT]滝グラフ用

ソリューション：

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

ライブ例：多分範囲外 https://jsfiddle.net/2uszoLop/