How to dynamically change line color based on valu

问题:

I am trying to build a line chart using highchart.js that uses the color green and black. The data is pulled from an SQL database and if the value is higher than the previous value it is green. If the value is less than the previous value than the color is black.

I am new at this and have been searching and searching but the only things I find is using zones to change the colors.

Can anyone help me on this?

回答1:

I created this example, it should help you :

series: [{
  name: 'Random data',
  colorByPoint: true,
  data: (function() {
    // generate an array of random data
    var time = (new Date()).getTime(),
      i,
      yValue;

    for (i = -19; i <= 0; i += 1) {
      yValue = Math.random();

      if (i > -19 && yValue > data[data.length - 1].y) { // Green point
        zones.push({
          color: "#5f9",
          value: time + i * 1000,
        });
      } else if (i > -19 && yValue <= data[data.length - 1].y) { // black point
        zones.push({
          color: "#000",
          value: time + i * 1000,
        });
      } else { // first point alway green
        zones.push({
          color: "#5f9",
          value: time + i * 1000,
        });
      }
      data.push({
        x: time + i * 1000,
        y: yValue
      });
    }
    return data;
  }()),
  zoneAxis: "x",
  zones: zones
}]

Fiddle