Highcharts, арифметическая операция между двумя точками серии графа

Question

Предполагая, что у меня есть эти две серии, показанные на графике. Я пытаюсь разделить значения User и Session, которые находятся в одном интервале на графике и отображаются при наведении курсора.

Вот демонстрационный код, а ниже - ссылка на скрипку.

Highcharts.chart('container', {

    chart: {
        scrollablePlotArea: {
            minWidth: 700
        }
    },

    data: {
        csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
            '057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
        beforeParse: function (csv) {
            return csv.replace(/\n\n/g, '\n');
        }
    },

    title: {
        text: 'Daily sessions at www.highcharts.com'
    },

    subtitle: {
        text: 'Source: Google Analytics'
    },

    xAxis: {
        tickInterval: 7 * 24 * 3600 * 1000, // one week
        tickWidth: 0,
        gridLineWidth: 1,
        labels: {
            align: 'left',
            x: 3,
            y: -3
        }
    },

    yAxis: [{ // left y axis
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],

    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },

    tooltip: {
        shared: true,
        crosshairs: true
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {

            },
            marker: {
                lineWidth: 1
            }
        }
    },

    series: [{
        name: 'All sessions',
        lineWidth: 4,
        marker: {
            radius: 4
        }
    }, {
        name: 'New users'
    }]
    });

Fiddle

Как вы видите на скрипке, если вы наводите график, вы видите сессию этого дня и пользовательские значения. Могу ли я также добавить коэффициент, который является сеанс / пользователь?

Кажется, я не могу найти соответствующий пример в документации. Любой совет ценится.

Answer 1

Check tooltip.formatter

  tooltip: {
    shared: true,
    crosshairs: true,
    formatter: function() {
      var points = this.points;
      var str = '<span style="font-size:.85em">' + Highcharts.dateFormat('%A %b %e, %Y',
        new Date(points[0].x)) + '</span><br>'
      points.map((el) => {
        str += '<span style="color:' + el.color + '">\u25CF</span> ' + el.series.name + ': <b>' + el.y + '</b><br/>'
      })
      str += '<span style="color:red">\u25CF</span> ' + points[0].series.name + '/' + points[1].series.name + ': <b>' + (points[0].y / points[1].y).toFixed(2) + '</b><br/>'
      return str
    }
  },

Fiddle demo

Answer 2

Возможно, вам придется создать всплывающую подсказку самостоятельно. Есть метод formatter(), позволяющий нам создать нужную подсказку.

formatter: function() { 
  var tooltip = '<span style="font-size:10px">' + moment(this.x).format('dddd, MMM DD, YYYY') + '</span><br>';
  for (var i = 0; i < this.points.length; i++) {
    let point = this.points[i]
    tooltip += '<span style="color:' + point.series.color + '">●</span>';
    tooltip += point.series.name + ': ';
    tooltip += '<b>' + point.y + '</b><br>';
  }
  let ratio = (this.points[1].y / this.points[0].y).toFixed(2);
  tooltip += '<span>Ratio: <b>' + ratio + '</b></span>'
  return tooltip;
},

Я использую moment.js для форматирования даты и времени, а this.x - это количество миллисекунд с 1 января 1970 года по Гринвичу.

moment(this.x).format('dddd, MMM DD, YYYY')

Highcharts.chart('container', {

  chart: {
    scrollablePlotArea: {
      minWidth: 700
    }
  },

  data: {
    csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
      '057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
    beforeParse: function(csv) {
      return csv.replace(/\n\n/g, '\n');
    }
  },

  title: {
    text: 'Daily sessions at www.highcharts.com'
  },

  subtitle: {
    text: 'Source: Google Analytics'
  },

  xAxis: {
    tickInterval: 7 * 24 * 3600 * 1000, // one week
    tickWidth: 0,
    gridLineWidth: 1,
    labels: {
      align: 'left',
      x: 3,
      y: -3
    }
  },

  yAxis: [{ // left y axis
    title: {
      text: null
    },
    labels: {
      align: 'left',
      x: 3,
      y: 16,
      format: '{value:.,0f}'
    },
    showFirstLabel: false
  }, { // right y axis
    linkedTo: 0,
    gridLineWidth: 0,
    opposite: true,
    title: {
      text: null
    },
    labels: {
      align: 'right',
      x: -3,
      y: 16,
      format: '{value:.,0f}'
    },
    showFirstLabel: false
  }],

  legend: {
    align: 'left',
    verticalAlign: 'top',
    borderWidth: 0
  },

  tooltip: {
    formatter: function() { 
      var tooltip = '<span style="font-size:10px">' + moment(this.x).format('dddd, MMM DD, YYYY') + '</span><br>';
      for (var i = 0; i < this.points.length; i++) {
        let point = this.points[i]
        tooltip += '<span style="color:' + point.series.color + '">●</span>';
        tooltip += point.series.name + ': ';
        tooltip += '<b>' + point.y + '</b><br>';
      }
      let ratio = (this.points[1].y / this.points[0].y).toFixed(2);
      tooltip += '<span>Ratio: <b>' + ratio + '</b></span>'
      return tooltip;
    },
    shared: true,
    crosshairs: true
  },

  plotOptions: {
    series: {
      cursor: 'pointer',
      point: {

      },
      marker: {
        lineWidth: 1
      }
    }
  },

  series: [{
    name: 'All sessions',
    lineWidth: 4,
    marker: {
      radius: 4
    }
  }, {
    name: 'New users'
  }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>