conditional marker colors in highcharts

问题:

I'm using Highcharts and I want to fill markers in line chart with different colors. For example: when variable "a" is 1 then fill marker with red else fill with green. Is it possible to do that?

Here is the code: http://jsfiddle.net/EnyCJ/1/

I was trying to do that with formatter but it doesn't work. Any suggestions?

var a=1;

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

回答1:

Try:

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

etc.

回答2:

You also use zones:

$(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

回答3:

How about removing the logic from your chart and use it only to display data?

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

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

回答4:

Expanding upon Asad Saeeduddin's answer:

I am using dataLabels in a doughnut pie chart and the proposed solution was very specific to a singular situation. I wanted to change the label text colors for individual pie slices, based on conditional logic, comparing values.

Just sharing because my search brought me here.

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