2016-01-20 2 views
0

Я пытаюсь изменить цвет фона подсказки инструмента. Вот как он выглядит в настоящее время. Tornado ChartКак изменить цвет подсказки инструмента в highchart?

Функция форматировщик я использовал это

 tooltip: { 
     useHTML: true, 
     enabled: true, 
     //backgroundColor: null, 
     borderWidth: 0, 
     shadow: false, 
     formatter: function() { 
      var value = '<div style="background-color:red;"><span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span><div>'; 
      return value; 

     }, 
}, 

Я хочу, чтобы цвет инструмента наконечник фона, чтобы быть серии color.Also пожалуйста, предложите мне, как заполнить DIV, потому что, как показано на изображении ДИВ наполовину заполненный красным. Спасибо заранее.

+0

ли вы имеете в виду что-то вроде этого: http://jsfiddle.net/cwnf6a4a/? –

+0

Можем ли мы получить наконечник инструмента таким образом, чтобы он был синим, поэтому весь наконечник инструмента находится в синем цвете. Серии находятся в черном цвете, поэтому весь наконечник инструмента находится в черном цвете. Я отредактировал Nighisha John ниже, где вы можете найти скриншоты. –

+0

http://jsfiddle.net/s5m0ut0p/ Кажется, чтобы реализовать вашу функциональность, дайте мне знать, если это не так. –

ответ

0

Изменение функции форматирования в

tooltip: { 
     useHTML: true, 
     enabled: true, 
     backgroundColor: null, 
     borderWidth: 0, 
     shadow: false, 
     formatter: function() { 
      var value = '<div style="background-color:'+ this.series.color+';padding:10px"><span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span><div>'; 
      return value; 
     } 
} 

Вот пример FIDDLE

enter image description here

enter image description here

0

Вы должны использовать tooltip.formatter настроить содержание подсказке и спускового ATTR() на элементе SVG tooltip. Эта функция позволяет манипулировать атрибутами форм.

formatter: function() { 
    var color = this.color; 

    this.series.chart.tooltip.label.attr({ 
     'fill': color 
    }); 

    var value = '<span><b>Market Performance<span style=\'padding-left:50px\'>' + this.x + '</span></b><br/> ' + this.series.name + '$' + this.y + '</span>'; 
    return value; 

    }, 

Пример: http://jsfiddle.net/fqcpd32f/

Смежные вопросы