是否可以使用 Highcharts 在区域图上设置 upColor？答案

【问题标题】：Is it possible to have an upColor on a Area graph using Highcharts?是否可以使用 Highcharts 在区域图上设置 upColor？
【发布时间】：2020-12-23 02:32:52
【问题描述】：

我有一个面积图，想知道当它上升时是否有可能增加颜色。 upColor 选项适用于瀑布图、烛台图表。如果可能的话，任何人都知道面积图怎么样？下面是我系列的一个sn-p。

series: [ {
        upColor: Highcharts.getOptions().colors[2],
        data: AreaData,
        type: 'area',
        name: 'NAV',
        id: 'GG'
           
        }
    ], 



 [1483074000000, 529565.95]
 [1485838800000, 581409.01]
 [1488258000000, 635260.08]
 [1490932800000, 664102.35]
 [1493352000000, 638819.73]
 [1493524800000, 638819.73]
 [1494475200000, 638911]
 [1494561600000, 689111.15]
 [1494820800000, 717497.05]
 [1494907200000, 720143.97]
[1494993600000, 724890.17]

【问题讨论】：

我不确定我是否理解您的要求 - 您想要共享演示中呈现的视觉输出吗？ jsfiddle.net/BlackLabel/gx7ec0sp
jsfiddle.net/Ibra96/mjkrLw90/1 我想要绿色向上，红色向下
我明白了，但您能提供更多信息吗？您的数据将是静态的还是动态的？你能分享你的数据样本吗？你还没有回答我之前的问题 - would you like to have a visual output as is rendered in the shared demo。
在 ex 中呈现输出会很棒。数据将存储在 React 组件状态中。 " 如果值大于起始值，则为绿色，否则为红色"
您能否提供将要使用的数据样本？为这种情况找到解决方案会容易得多。

标签： javascript reactjs highcharts react-highcharts

【解决方案1】：

根据 cmets - area 系列没有实现 upColor 功能来更改递增数据的颜色。在这种情况下可以做的是使用zones 功能来填充该区域的特定部分。

演示：https://jsfiddle.net/BlackLabel/73pm4awq/

events: {
  load() {
    const chart = this,
      series = chart.series[0],
      points = series.points,
      zones = [];

    series.points.forEach((p, i) => {
      if (points[i + 1] && p.y < points[i + 1].y) {
        zones.push({
          value: points[i + 1].x,
          color: 'green'
        })
      } else {
        zones.push({
          value: p.x,
          color: 'red'
        })
      }
    });
    series.update({
      zones: zones
    })
  }
}

API：https://api.highcharts.com/highcharts/series.line.zones

API：https://api.highcharts.com/class-reference/Highcharts.Series#update

【讨论】：

【解决方案2】：

我修改了@Sebastian 的回复，将每个点与系列中的第一点进行比较。 “自成立以来”

    events: {
  load() {
    const chart = this,
      series = chart.series[0],
      points = series.points,
      zones = [];

    series.points.forEach((p, i) => {
      if ( points[0].y < points[i].y ) {
        zones.push({
          value: points[i].x,
          color: 'green'
        })
      } else {
        
        zones.push({
          value: p.x,
          color: 'red'
        })
      }
    });
    series.update({
      zones: zones
    })
  }
}

除了 zoneAxis 属性 series.zoneAxis，它“定义了应用区域的轴”。根据文档。

zoneAxis:'x'

【讨论】：