ändern Graph Farbe über und unter Plot-line in Säulendiagramm in Highcharts

Question

Ich habe einen Graph mit zwei parzellen lines.I muß nach der Überquerung jede Parzelle-Linien des Säulenabschnitt mit unterschiedlicher Farbe färben. Aber Zonen machen unterschiedliche Spalten unterschiedliche Farben, nicht die oben genannten Bereiche. Ich habe Zonen & Thresholds versucht, aber keine Lösung für Säulendiagramm haben.

Es gibt Lösungen für Liniendiagramm aber nicht für Säulendiagramm arbeiten.

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

standardmäßig Highcharts nicht unterstützt diese Art der Färbung.

Die Problemumgehung hier ist Zonen mit stacking Mechanismus nachzuahmen und einen Punkt in mehrere einzuteilen, die Zonen widerspiegeln. Jede Reihe enthält Punkte von einer Zone:

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

Live-Demo:http://jsfiddle.net/kkulig/g77od3wr/

linkedTo bewirkt, dass alle Reihe geschaltet ist (es gibt nur eine Legende Artikel). tooltip.shared: true und tooltipFormater werden verwendet, um die vorherige Formatierung des Tooltips wiederherzustellen (Gesamtwert statt aller aufgeführten Serien).