Javascript 海图中的条件标记颜色

我正在使用Highcharts，我想用不同的颜色填充折线图中的标记。例如：当变量“a”为1时，则用红色填充标记，否则用绿色填充标记。有可能吗

代码如下：

我试图用formatter实现这一点，但它不起作用。有什么建议吗

var a=1;

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

尝试：

---

等等。

从图表中删除逻辑并仅用于显示数据如何

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

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

扩展到：

我在甜甜圈饼图中使用数据标签，建议的解决方案非常特定于一种特殊情况。我想根据条件逻辑更改单个饼图切片的标签文本颜色，比较值

只是分享，因为我的搜索把我带到了这里

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

数据：外部数据，
数据标签：{
格式化程序：
函数（）{
if（（outerData[this.point.x].y>innerData[this.point.x].y）&（this.point.x！=0））{
返回this.y>0.1？''+this.point.name+'：'+this.y+'%'+''：null；
}否则{
返回this.y>0.1？''+this.point.name+'：'+this.y+'%'+''：null；
}
}
}

您还可以使用分区：

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

---

我当时正在做类似的事情，我想我会在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'
      }
  }

最后，我发现where is展示了一个示例，说明了如何输入对象数组，并使用键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',
          }
        })

---

只有一个问题。我用数组p代替正则变量a（参见演示-）。我想检查p[某物]是否等于1。我写了p[this.x]，但它不起作用。有没有办法解决这个问题？这个.x指的是什么？如果p是一个数组，您应该引用第一个元素，例如：

p[0]

this.x从0到n，它是x轴上的数字。所以它应该像p[0]，p[1]等等。但事实并非如此。相反，是否可以在函数（check）{}中进行循环，这将检查p[i]，我将从m到n？谢谢提示。我找到了另一个解决方案，也很有效。我创建了一个数组（带有循环），比如var r=[{“y”：5，“marker”：{“fillColor”：“grey”}，{“y”：8，“marker”：{“fillColor”：“red”}，{“y”：9，“marker”：{“fillColor”：“red”}]；并用不同的颜色填充标记。

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