Настроить подсказку Highstock условно

Question

Я хотел бы сделать всплывающую подсказку в Highstock по-разному (не только стиль контента, но и стиль для самой всплывающей подсказки. Например, различные прокладки, тени, границы радиуса и т. Д.) При наведении курсора на ряд флагов и линейные ряды , Однако похоже, что эти свойства необходимо настроить в объекте конфигурации всплывающей подсказки. Не уверен, может ли он быть динамически изменен.

Как и в этом jsbin: http://jsbin.com/cixowuloxa/1/edit?js,output

Что может быть лучше, чтобы дать «Лето прибывает» всплывающую подсказку другого стиля, чем другие общие подсказки?

Answer 1

Ваш подход правильный. В обратном вызове форматирования оберните текст в тегах html и создайте его с помощью css, inline или по имени класса, в зависимости от того, является ли это флагом или линейной серией. Убедитесь, что вы установили useHTML в true.

tooltip: { 
     useHTML:true, 
     borderWidth: 0, 
     headerFormat: '', 
     shared: true, 
     formatter: function(){ 
      if (!!this.points) { 
      return this.points 
      .reduce(
      function(prev, cur) { 
      return prev + 
       '<br>' + cur.series.name + ': '+ cur.y; 
      }, ''); 
      } 
      return "<div style='border:5px solid black; padding: 20px'>Summer arrives!</div>"; 
     }, 
     padding: 0 
     } 

пример: https://jsfiddle.net/hpeq7Lbe/1/

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

plotOptions: { 
     line: { 
     tooltip: { 
      pointFormat: 'line', 
      borderWidth: 10, // not supported 
      padding: 10 // not supported 
     } 
     }, 
     flags: { 
     tooltip: { 
      pointFormat: 'flags', 
      borderWidth: 1, //not supported 
      padding: 1 // not supported 
     } 
     } 
    } 

пример: https://jsfiddle.net/hpeq7Lbe/3/