highcharts - 根据 y 值改变区域的颜色

Question

如何根据同系列的 y 值更改区域类型图的颜色？

---

图表类型 - 区域

---

y- 可能的值 - 1、2 和 3

---

期望的输出 - 3 和 2 之间的值的绿色区域，2 和 1 之间的值的红色区域

Answer 1

有两个选项，你的描述缺乏信息，所以我给你两个：http://jsfiddle.net/4vzEt/13/

1. 负色阈值：

   $("#container1").highcharts({
     series: [{
       threshold: 2,
       negativeColor: 'red',
       color: 'green',
       type: 'area',
       data: [1, 2, 2, 1, 3, 3, 2, 3, 2, 1, 1, 3, 1, 1]
     }]
   });
   

   注意：阈值将系列的起始 y 值设置为该值。

2. 渐变色：

   $("#container2").highcharts({
       series: [{
           threshold: 1,
           color: {
               linearGradient: {
                   x1: 0,
                   x2: 0,
                   y1: 0,
                   y2: 1
               },
               stops: [
                   [0, 'green'],
                   [0.49, 'green'],
                   [0.5, 'red'],
                   [1, 'red']
               ]
           },
           type: 'area',
           data: [1, 2, 2, 1, 3, 3, 2, 3, 2, 1, 1, 3, 1, 1]
       }]
   });
   

   注意：标记继承系列颜色。禁用它们，或直接为每个点设置颜色。