ハイチャートの縦棒グラフの上下にグラフの色を変更してください

Question

私は2本のプロットラインを持つグラフを持っています。各プロットラインを横断した後、異なる色でカラム部分の色を付ける必要があります。しかし、ゾーンは、上記の部分だけではなく、異なる列の色を孤立させます。ゾーン&のしきい値を試しましたが、縦棒グラフの解決策はありませんでした。

折れ線グラフの解法はありますが、縦棒グラフでは機能しません。デフォルトHighchartsによって

Highcharts.chart('container', { 
        chart: { 
         zoomType: 'xy', 
         events: { 
          load: function() { 
           this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip); 
          } 
         } 
        }, 
        title: { 
         text: '' 
        }, 
        credits: { 
         enabled: false 
        }, 
        subtitle: { 
         text: '' 
        }, 
        useUTC: false, 
        xAxis: [{ 
         type: 'datetime', 
         dateTimeLabelFormats: { 
          day: '%e %b', 
          hour: '%I:%M %P' 
         } 

        }], 
        yAxis: [{ // Primary yAxis 
         labels: { 
          format: '{value:,.0f}', 
          style: { 
           color: Highcharts.getOptions().colors[1] 
          } 
         }, 
         plotLines: [peakPlotLineOption, averagePlotLineOption], 
         title: { 
          text: 'Consumption (kWh)', 
          style: { 
           color: Highcharts.getOptions().colors[1] 
          } 
         }} 

        , { // Secondary yAxis 
         title: { 
          text: '', 
          style: { 
           color: Highcharts.getOptions().colors[0] 
          } 
         }, 
         labels: { 
          format: '{value} kWh', 
          style: { 
           color: Highcharts.getOptions().colors[0] 
          } 
         }, 
         visible: false 
        }], 

     tooltip: { 
      crosshairs: true, 
      shared: true, 
      valueSuffix: '°C' 
     }, 
        series: [{ 
         name: 'ABC', 
         type: 'column', 
         data: 

         [ 
         { x: Date.UTC(2017, 6, 2, 0), y: 49.9, bId: 1 }, 
         { x: Date.UTC(2017, 6, 2, 1), y: 71.5, bId: 2 }, 
         { x: Date.UTC(2017, 6, 2, 2), y: 106.4, bId: 3 }, 
         { x: Date.UTC(2017, 6, 2, 3), y: 129.2, bId: 4 }, 
         { x: Date.UTC(2017, 6, 2, 4), y: 144.0, bId: 5 }, 
         { x: Date.UTC(2017, 6, 2, 5), y: 176.0, bId: 6 }, 
         { x: Date.UTC(2017, 6, 2, 6), y: 135.6, bId: 7 }, 
         { x: Date.UTC(2017, 6, 2, 7), y: 148.5, bId: 8 }, 
         { x: Date.UTC(2017, 6, 2, 8), y: 216.4, bId: 9 }, 
         { x: Date.UTC(2017, 6, 2, 9), y: 194.1, bId: 10 }, 
         { x: Date.UTC(2017, 6, 2, 10), y: 95.6, bId: 11 }, 
         { x: Date.UTC(2017, 6, 2, 11), y: 54.4, bId: 12 }, 
         { x: Date.UTC(2017, 6, 2, 12), y: 45, bId: 13 }, 
         { x: Date.UTC(2017, 6, 2, 13), y: 62, bId: 14 }, 
         { x: Date.UTC(2017, 6, 2, 14), y: 35, bId: 15 } 
         ], 
         tooltip: { 
          valueSuffix: ' kWh' 
         }, 
         yAxis: 0, 
         zones: [{ 
           value: 50, 
           color: '#90ed7d' 
           }, { 
           value: 100, 
           color: '#FFDE00' 
           },{ 
           color: '#CE0000' 
           }] 
        } 
        , { 
         // Series that mimics the plot line 
         color: '#ee8176', 
         name: 'contract capacity', 
         dashStyle: 'Solid', 
         marker: { 
          enabled: false 
         }, 
         events: { 
          legendItemClick: function (e) { 
           if (this.visible) { 
            this.chart.yAxis[0].removePlotLine(averagePlotLine); 
           } 
           else { 
            this.chart.yAxis[0].addPlotLine(averagePlotLineOption); 
           } 
          } 
         }, 
         yAxis: 0 
        }, { 
         // Series that mimics the plot line 
         color: '#9fa7b1', 
         name: 'max demand', 
         dashStyle: 'Solid', 
         marker: { 
          enabled: false 
         }, 
         events: { 
          legendItemClick: function (e) { 
           if (this.visible) { 
            this.chart.yAxis[0].removePlotLine(peakPlotLine); 
           } 
           else { 
            this.chart.yAxis[0].addPlotLine(peakPlotLineOption); 
           } 
          } 
         }, 
         yAxis: 0 
        }    
       ] 
       }); 

JsFiddle Colulmn chart

Answer 1

着色のようなものをサポートしていません。

回避策は、ゾーンを模倣し、ゾーンを反映する複数のゾーンに分割することです。

var zones = [{ 
    color: 'green', 
    start: 0 
}, { 
    color: 'yellow', 
    start: 30 
}, { 
    color: 'red', 
    start: 80 
}]; 

//(...) 

function prepareSeries(series) { 
    var newSeries = [], 
    data = series.data; 

    series.data = []; 

    // create separate series for each zone 
    zones.forEach(function(z, i) { 
    newSeries.push({ 
     data: [] 
    }); // copy series properties 
    }); 

    // create new points and add them to new series array 
    data.forEach(function(p) { 
    for (var i = 0; i < zones.length; i++) { 
     var currentZone = zones[i], 
     nextZone = zones[i + 1], 
     zoneSeries = newSeries[i]; 

     zoneSeries.color = currentZone.color; 

     if (nextZone && p.y > nextZone.start) { 
     zoneSeries.data.push({ 
      x: p.x, 
      y: nextZone.start - currentZone.start 
     }); 
     } else if (p.y > currentZone.start) { 
     zoneSeries.data.push({ 
      x: p.x, 
      y: p.y - currentZone.start 
     }); 
     } 

    } 
    }); 

    newSeries.reverse(); 

    // one legend for all created series 
    for (var i = 1; i < newSeries.length; i++) { 
    newSeries[i].linkedTo = ':previous'; 
    } 

    return newSeries; 
} 

ライブデモ：すべてのシリーズは1ゾーンからのポイントが含まれていhttp://jsfiddle.net/kkulig/g77od3wr/

linkedTo（一つだけ凡例アイテムがあります）すべてのシリーズが接続されていることが発生します。 tooltip.shared: trueおよびtooltipFormaterは、以前のツールチップの書式設定（リストされているすべてのシリーズではなく合計値）を復元するために使用されます。