Highcharts 工具提示断线

Question

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

Date

Parameter Name

User who promoted changes

我可以在每条信息上添加换行符，但我无法再次换行，因此每条信息之间有一个 space。我的 'series' 属性看起来像这样：

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 属性 for tooltip in series, 你必须在general tooltip options里设置:

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 工具提示断线

Highcharts tooltips break line

html

javascript

css

tooltip

highcharts