highcharts中的条件标记颜色

Posted 2023-02-16

【中文标题】highcharts中的条件标记颜色

【英文标题】：conditional marker colors in highcharts

【发布时间】：2012-10-15 14:00:01

【问题描述】：

我正在使用 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,
  
 
,

【参考方案1】：

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

我最终找到了这个codepen，其中显示了如何输入对象数组并使用键 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',
          
        )

【参考方案2】：

扩展Asad Saeeduddin's answer：

我在甜甜圈饼图中使用 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;
           
        
    

【参考方案3】：

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

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

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

【参考方案4】：

试试：

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

等等

【讨论】：

只有一个问题。我有数组 p 而不是常规变量 a（参见演示 - jsfiddle.net/jFmSD）。我想检查 p[something] 是否等于 1。我写 p[this.x] 但它不起作用。任何想法如何解决这个问题？

this.x 指的是什么？如果 p 是一个数组，你应该引用，例如第一个元素，像这样：p[0]

this.x 从 0 到 n，它是 x 轴的数字。所以它应该像 p[0]、p[1] 等等。但事实并非如此。

取而代之的是，是否可以在该函数 function(check) 中进行循环，它将检查 p[i] 并且 i 将从 m 变为 n？

感谢您的提示。我找到了另一个解决方案，它也有效。我创建了一个数组（带循环），如 var r = ["y":5,"marker":"fillColor":"grey","y":8,"marker":"fillColor" :"red","y":9,"marker":"fillColor":"red"];并用不同的颜色填充标记。

【参考方案5】：

您还使用区域：

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

Try it in jsfiddle.net