Highcharts工具提示断线

Question

我目前正在开发一种模式，它使用highcharts向用户显示一些数据。好吧，我需要在每个数据上包含一些自定义工具提示，它们应该看起来像这样：

日期

参数名称

促销变更的用户

我可以在每一个上添加一个换行符，但我不能再次打破这一行，所以每个信息之间都有一个空格。我的'系列'属性看起来像这样：

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/