Highcharts - Как показать промежуточные значения на диаграмме области - PullRequest
Новая
       54

Highcharts - Как показать промежуточные значения на диаграмме области

0 голосов
/ 28 февраля 2019

У меня есть следующая диаграмма: 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 февраля значение Below Minimum (красный) варьируется от 200 до 300. Если бы я поместил свою мышь на полпути между этими датами, я бы хотел увидеть «Below Minimum: 250».Есть ли способ достичь этого?

Если нет, я бы по крайней мере хотел бы, чтобы текущая подсказка всегда показывала предыдущее значение точки вместо того, к которому оно ближе всего.Если я наведусь около 12/2018, я хочу увидеть точку с 1 сентября 2018 года, а не с 1 января 2019 года. По сути, это даты начала значений и действительны только на дату или после нее.

1 Ответ

0 голосов
/ 01 марта 2019

Вам нужно увеличить плотность очков.Ниже вы можете найти пример того, как вы можете сделать это программно: 

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

...