如何根据高图中的值低于先前值来动态更改线条颜色 [英] How to dynamically change line color based on value being lower than previous in highcharts

问题描述

我正在尝试使用使用绿色和黑色的highchart.js构建折线图.数据是从SQL数据库中提取的，如果该值大于先前的值，则为绿色.如果该值小于先前的值，则颜色为黑色.

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.

有人可以帮我吗?

推荐答案

我创建了此示例，它应为您提供帮助:

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

小提琴

这篇关于如何根据高图中的值低于先前值来动态更改线条颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！