在Google图表的烛台图表中自定义工具提示文字 [英] Custom tooltip text in Candlestick chart of google charts

问题描述

我在Google Charts API上玩了一下，实际上我需要更改烛台图表工具提示中显示的默认文本。不仅改变风格，而且它的内容。

有谁知道如何实现它？

解决方案

<使用html标签来自定义工具提示内容。

，20,28,38,45，customTooltip（'Monday'）]，
['Tue'，31,38,55,66，customTooltip（'Tuesday'）]，
['Wed' ，50,55,77,80，customTooltip（'Wednesday'）]，
['Thu'，77,77,66,50，customTooltip（'Thursday'）]，
['Fri' ，68，66，22，15，customTooltip（'Friday'）]
]）;

函数customTooltip（text）{
return'< div style =padding：5px 5px 5px 5px;>'+
'< table id =medals_layout style =color：＃db6acf; font-size：large>'+'< tr>'+
'< td>< b>'+ text +'< / b><< ; / td>'+'< / tr>'+'< / table>'+'< / div>';

看看这个 jqfaq.com ，它有一个线形图的工作示例

I'm playing a bit with Google Charts API, and actually I need to change the default text showed in the tooltip of candlestick chart. Not only to change the style, but also it's content.
Does anyone knows how to achieve it?

解决方案

Try this code to customize Tooltip content using html tags.

 data.addRows([
           ['Mon', 20, 28, 38, 45, customTooltip('Monday')],
           ['Tue', 31, 38, 55, 66, customTooltip('Tuesday')],
           ['Wed', 50, 55, 77, 80, customTooltip('Wednesday')],
           ['Thu', 77, 77, 66, 50, customTooltip('Thursday')],
           ['Fri', 68, 66, 22, 15, customTooltip('Friday')]
    ]);

 function customTooltip(text) {
    return '<div style="padding:5px 5px 5px 5px;">' +
 '<table id="medals_layout" style=" color:#db6acf; font-size:large">' + '<tr>' +
 '<td><b>' + text + '</b></td>' + '</tr>' + '</table>' + '</div>';

 }

Take a look at this jqfaq.com that has a working sample for Line chart

这篇关于在Google图表的烛台图表中自定义工具提示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！