Формат всплывающей подсказки Highcharts отличается от серии

Question

Я новичок в Highcharts, я пытаюсь составить столбчатые диаграммы с некоторыми данными. Графики должны отображаться так:

но мне не удалось. Я действительно запутался, пытаясь отобразить всплывающую подсказку, как в коробке, потому что в серии есть только 2 вещи (Rencana, Realisasi), а в рамке показано 3 (Rencana, Realisasi, Indicator). и я должен попытаться отформатировать всплывающую подсказку следующим образом:

{
  chart: {
      renderTo: 'gjenis',
      type: 'column'
  },
  title: {
      text: 'Bauran Energi per Jenis Bahan Bakar (TWh)'
  },
  subtitle: {
      text: ' '
  },
  xAxis: {
      categories: jenis,
      crosshair: true
  },
  yAxis: {
      min: 0,
      title: {
          text: ' '
      }
  },
  tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
          '<td style="padding:0"><b>{point.y:.2f} TWh</b></td></tr>' + 
          '<tr><td>Indikator : </td>' +
          '<td><b>x %</b></td></tr>',
      footerFormat: '</table> ',
      shared: true,
      useHTML: true
  },
  plotOptions: {
      column: {
          pointPadding: 0.2,
          borderWidth: 1
      }
  },
  series: [{
      name: 'Rencana',
      data: rencana,
      color: 'red'

  }, {
      name: 'Realisasi',
      data: realisasi,
      color: 'blue'

  }]
}

но результат в поле вот так:

Есть ли какая-либо функция, которая может отображаться как первое изображение, чтобы она не зацикливала «Индикатор»? Как отформатировать всплывающую подсказку, чтобы она была похожа на первую?

Большое спасибо за внимание

Answer 1

в соответствии с документом :

Начиная с версии 2.1, всплывающая подсказка может быть разделена между несколькими сериями через опцию общего доступа.Доступные данные в форматере немного отличаются в зависимости от того, является ли всплывающая подсказка общей или нет.В общей всплывающей подсказке все свойства, кроме x, который является общим для всех точек, сохраняются в массиве this.points.

, когда для свойства shared установлено значение true, тогда выВы можете использовать пользовательскую функцию formatter, и внутри этой функции вы можете перебирать свои точки и генерировать пользовательскую подсказку (например, то, что вы хотите).например:

tooltip: {
    formatter: function () {
        var s = "<span style=\"font-size:10px\">" + this.x + "</span><table>"

        $.each(this.points, function () {
            s += "<tr><tdstyle=\"color:"+this.series.color+";padding:0\">"+this.series.name+": </td>" +
      "<td style=\"padding:0\"><b>"this.series.y+" TWh</b></td></tr>";
        });
        s += "<tr><td>Indikator : </td>"+ "<td><b>x %</b></td></tr></table>"
        return s;
    },
    shared: true,
    useHTML: true
}

(пожалуйста, учтите, что код не проверен и предназначен только для того, чтобы дать вам представление о том, что я имею в виду.)

РЕДАКТИРОВАТЬ : вкод, который я использовал this.series.y для доступа к y значению, которое неверно и должно быть this.y:

tooltip: {
    formatter: function () {
        var s = "<span style=\"font-size:10px\">" + this.x + "</span><table>"

        $.each(this.points, function () {
            s += "<tr><tdstyle=\"color:"+this.series.color+";padding:0\">"+this.series.name+": </td>" +
      "<td style=\"padding:0\"><b>"this.y+" TWh</b></td></tr>";
        });
        s += "<tr><td>Indikator : </td>"+ "<td><b>x %</b></td></tr></table>"
        return s;
    },
    shared: true,
    useHTML: true
}