highcharts 中的條件標記顏色

Question

我正在使用 Highcharts，我想在折線圖中填充不同顏色的標記。 例如：當變量“a”為 1 時，用紅色填充標記，否則用綠色填充。 有可能這樣做嗎？

這是代碼： http : //jsfiddle.net/EnyCJ/1/

我試圖用格式化程序來做到這一點，但它不起作用。 有什么建議？

var a=1;

plotOptions: {
 series: {
  marker: {
   fillColor: {
    formatter: function () {
      if (a == 1) {
       return 'red'
      } else {
       return 'green'
      }
    }
   },
  lineWidth: 2,
  }
 }
},

Answer 1

嘗試：

fillColor: a==1 ? "#ff0000" : "#00ff00"

等等。

Answer 2

您還可以使用區域：

$(function () {
    $('#container').highcharts({
        series: [{
            data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
            zones: [
              {
                value: 0,
                color: '#f7a35c'
              }, 
              {
                color: '#90ed7d'
              }
            ]
        }]
    });
});

在 jsfiddle.net 中嘗試

Answer 3

如何從圖表中刪除邏輯並僅將其用於顯示數據？

var a = 1,
    color = a ? 'red' : 'green';

plotOptions: {
     series: {
         marker: {
             fillColor: color,
             lineWidth: 2,
         }
     }
}

Answer 4

擴展Asad Saeeduddin 的回答：

我在甜甜圈餅圖中使用了 dataLabels，並且建議的解決方案非常針對單一情況。 我想根據條件邏輯更改單個餅圖的標簽文本顏色，比較值。

只是分享，因為我的搜索把我帶到了這里。

data: outerData,
dataLabels: {
    formatter:
        function () {
            if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) {
                return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
            } else {
                return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
           }
        }
    }

Answer 5

我正在做這樣的事情，我想我會用 2021 年的回復更新這篇文章。 事實證明，在 Highcharts 中，您必須將數組輸入數據，但它可以是具有與該點相關聯的參數的對象數組。 我試圖使點填充與 y 軸的比例不同，如下所示：

tempScale(value: any) {
      if(value > 32) {
        return 'red'
      }
      else if(value > 31) {
        return 'orange'
      }
      else if(value > 30) {
        return 'yellow'
      }
      else if(value > 28) {
        return 'green'
      }
      else if(value > 27) {
        return 'blue'
      }
      else {
        return '#99ffff'
      }
  }

我最終找到了這個代碼筆，其中顯示了一個示例，說明如何輸入對象數組並使用鍵 y、顏色、標記和半徑為數組中的每個項目提供屬性。

   {
      y: 9,
      color: 'green',
      marker: {
        radius: 10
      }
    }

在將它們推入數組之前，我最終組合了 2 並計算了它們中的每一個的顏色，這對我的目的非常有用。

array.push({
          y: item.attributes.Sal, 
          color: this.tempScale(item.attributes.Temp), 
          marker: {
            lineWidth: 1,
            lineColor: 'black',
          }
        })