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

根据document：

从版本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 }

Highcharts工具提示格式与系列不同

1 个答案: