Всплывающие подсказки Highcharts - PullRequest
Новая
       35

Всплывающие подсказки Highcharts

0 голосов
/ 18 сентября 2018

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

Дата

Имя параметра

Пользователь, который внес изменения

Я могу добавить разрыв строки для каждого из них, но не могу снова разорвать строку, поэтому между каждой информацией есть пробел.Моё свойство '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.Какие-нибудь мысли?Спасибо!

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Пожалуйста, взгляните на 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/

0 голосов
/ 18 сентября 2018

Переместите всплывающую подсказку из серии, и она должна работать: 

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,
},
...