Javascript 是否可以使用Highcharts在面积图上显示上色？

我有一个面积图，想知道它是否有可能有一个上升的颜色，当它上升。upColor选项适用于瀑布、烛台图表。面积图呢？如果可能的话，有人有想法吗？下面是我的系列文章的一个片段

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]

---

根据评论-区域序列没有实现upColor功能来更改不断增加的数据的颜色。在这种情况下，可以使用

分区

功能填充该区域的特定部分

演示：

事件：{
加载（）{
常数图=这个，
系列=图表。系列[0]，
点=系列点，
分区=[]；
级数.积分.forEach（（p，i）=>{
if（点[i+1]&&p.y<点[i+1].y）{
推({
值：点[i+1].x，
颜色：“绿色”
})
}否则{
推({
价值：p.x，
颜色：“红色”
})
}
});
series.update({
分区：分区
})
}
}

API:

---

API:

根据评论-area series没有实现upColor功能来更改不断增加的数据的颜色。在这种情况下，可以使用

分区

功能填充该区域的特定部分

演示：

事件：{
加载（）{
常数图=这个，
系列=图表。系列[0]，
点=系列点，
分区=[]；
级数.积分.forEach（（p，i）=>{
if（点[i+1]&&p.y<点[i+1].y）{
推({
值：点[i+1].x，
颜色：“绿色”
})
}否则{
推({
价值：p.x，
颜色：“红色”
})
}
});
series.update({
分区：分区
})
}
}

API:

---

API:

我修改了@Sebastian的回答，将每个点与系列中的第一点进行比较。“从一开始”

---

我修改了@Sebastian的回答，将每个点与系列中的第一点进行比较。“从一开始”

---

我不确定我是否很好地理解了您的需求-您是否希望有一个在共享演示中呈现的可视化输出？我想绿色当它向上和红色当它向下我看到，但你能提供更多的信息吗？您的数据是静态的还是动态的？你能分享一下你的数据样本吗？您还没有回答我前面的问题-

是否希望在共享演示中呈现可视化输出

。在ex中呈现输出将非常好。数据将以React组件状态存储。“如果值大于起始值绿色和红色，否则”您能否提供将使用的数据样本？在这种情况下，找到解决方案会容易得多。我不确定我是否很好地理解了您的需求-您是否希望获得共享演示中呈现的可视化输出？我想绿色当它向上和红色当它向下我看到，但你能提供更多的信息吗？您的数据是静态的还是动态的？你能分享一下你的数据样本吗？您还没有回答我前面的问题-

是否希望在共享演示中呈现可视化输出

。在ex中呈现输出将非常好。数据将以React组件状态存储。“如果值大于起始值绿色和红色，否则”您能否提供将使用的数据样本？对于这种情况，找到解决方案要容易得多。

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

    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:'x'