Highcharts - 如何在面积图上显示中间值

Question

我有以下图表：https://jsfiddle.net/w7jm2n6u/

  Highcharts.chart('container', {
      chart: {
        type: 'area',
        zoomType: 'x'
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      legend: {
        enabled: false
      },
      xAxis: {
        type: 'datetime',
        title: {
          enabled: false
        },
        min: Date.UTC(2018, 10, 1)
      },
      yAxis: {
        title: {
          enabled: false
        },
        labels: {
          formatter: function() {
            return this.value / 1000;
          }
        },
        max: 2000
      },
      tooltip: {
        split: false,
      },
      plotOptions: {
        area: {
          lineWidth: 1,
          marker: {
              enabled: false,
              states: {
                hover: {
                  enabled: false
                }
              }
            },
        },
          series: {
          trackByArea: true,
          stickyTracking: false,
        }
      },
      series: [{
          name: 'Exceeds',
          color: '#0000FF',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 2000
          },{
            x: Date.UTC(2019, 0, 1),
            y: 2000
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 2000
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 2000
          }],
        }, {
          name: 'Meets',
          color: '#00FF00',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 700
          },{
            x: Date.UTC(2019, 0, 1),
            y: 800
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 700
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 800
          }],
        }, {
          name: 'Minimum',
          color: '#FFFF00',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 400
          },{
            x: Date.UTC(2019, 0, 1),
            y: 400
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 400
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 400
          }],
        }, {
          name: 'Below Minimum',
          color: '#FF0000',
          fillOpacity: 1,
          marker: {
            enabled: false,
          },
          data: [
          {
            x: Date.UTC(2018, 8, 1),
            y: 100
          },{
            x: Date.UTC(2019, 0, 1),
            y: 200
          }, {
            x: Date.UTC(2019, 1, 1),
            y: 300
          }, {
            x: Date.UTC(2019, 2, 1),
            y: 320
          }],
        },
        {
          name: 'Data',
          color: '#000000',
          type: 'line',
          data: [{
              x: Date.UTC(2019, 0, 3),
              y: 50
            },
            {
              x: Date.UTC(2019, 0, 15),
              y: 500
            },
            {
              x: Date.UTC(2019, 1, 4),
              y: 1000
            },
            {
              x: Date.UTC(2019, 1, 15),
              y: 1400
            },
            {
              x: Date.UTC(2019, 1, 28),
              y: 1900
            },
          ]
        },
      ]
    });

理想情况下，我希望能够将鼠标悬停在每个区域上，并查看工具提示，其中包含4个区域中每个区域的值。例如，在1月1日到2月1日之间，低于最小值（红色）值的范围从200到300.如果我将鼠标放在这些日期之间，我希望看到“低于最低值：250”。有没有办法实现这个目标？

如果没有，我至少会喜欢当前的工具提示，以便始终显示之前的点值而不是最接近的值。如果我在12/2018左右徘徊，我希望看到2018年9月1日而不是2019年1月1日的观点。基本上这些是价值的开始日期，仅在日期或之后有效。

Answer 1

你需要增加点的密度。您可以在下面找到一个如何以编程方式执行此操作的示例：

chart: {
    type: 'area',
    events: {
        load: function() {
            var series = this.series,
                iterations = 2,
                i = 0,
                newData = [];

            for (; i < iterations; i++) {
                series.forEach(function(s) {
                    newData = [];

                    s.points.forEach(function(p, j) {
                        if (j) {
                            newData.push(
                                [
                                    s.points[j - 1].x +
                                    (p.x - s.points[j - 1].x) / 2,
                                    s.points[j - 1].y +
                                    (p.y - s.points[j - 1].y) / 2
                                ], 
                                [p.x, p.y]
                            );
                        } else {
                            newData.push([p.x, p.y]);
                        }
                    });

                    s.setData(newData, false);
                });
                this.redraw(false);
            }
        }
    }
},

现场演示：https://jsfiddle.net/BlackLabel/d8jq9bvh/

API参考：https://api.highcharts.com/highcharts/chart.events.load