Question

我目前正在开发一种使用高位图向用户显示一些数据的模式。好吧，我需要在每个数据上包含一些自定义工具提示，它们的外观应如下所示：

日期

参数名称

促成更改的用户

我可以在每个行上添加一个换行符，但是我无法再换行，因此每个信息之间都有一个空格。我的“系列”属性如下所示：

series: [
      {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#b4a9f9',
        name: 'Former',
        tooltip: {
          useHTML: true,
          headerFormat: `
            <span">Header Section</span> <br><br>
          `,
          pointFormat: `
            <span>Point Section</span>
          `
        }
      }

运行它时，即使其中有一个双br，我也无法使它两次断行。有什么想法吗？谢谢！

Answer 1

将工具提示从系列中删除，它应该可以工作：

Highcharts.chart('container', {

  title: {
    text: 'Tooltip Line Break Demo'
  },
  tooltip: {
    useHTML: true,
    headerFormat: '<small>Header :: {point.key}</small><br><br>',
    pointFormat: 'Point Section X :: {point.x}<br><br>Point Section Y:: {point.y}<br><br>',
    footerFormat: '</br>'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    color: '#b4a9f9',
    name: 'Former',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

  }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

如果您仍想对不同系列应用不同的工具提示格式，请将useHTML属性移出系列，并为不同系列编写不同的格式。

tooltip: {
    useHTML: true,
},

Answer 2

请查看Highcharts API：https://api.highcharts.com/highcharts/series.line.tooltip，您无法连续设置工具提示的useHTML属性，必须在常规工具提示选项中进行设置：

Highcharts.chart('container', {
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#b4a9f9',
        name: 'Former',
        tooltip: {
            headerFormat: `<span>Header Section</span><br><br>`,
            pointFormat: `<span>Point Section</span>`
        }
    }],
    tooltip: {
        useHTML: true
    }
});

API：https://api.highcharts.com/highcharts/tooltip.useHTML

实时演示：http://jsfiddle.net/BlackLabel/p3mcxkjd/

Highcharts工具提示折线

2 个答案: