Highcharts

Question

  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。如果我将鼠标放在这些日期之间的中间，我希望看到 'Below Minimum: 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

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

Highcharts - How to show intermediate values on Area chart

tooltip

area