谷歌图表烛台图表中的自定义工具提示文本答案

【问题标题】：Custom tooltip text in Candlestick chart of google charts谷歌图表烛台图表中的自定义工具提示文本
【发布时间】：2011-07-29 10:59:38
【问题描述】：

我正在使用 Google Charts API，实际上我需要更改烛台图表工具提示中显示的默认文本。不仅要改变风格，还要改变它的内容。
有谁知道如何实现它？

【问题讨论】：

标签： google-visualization

【解决方案1】：

试试这段代码，使用 html 标签自定义 Tooltip 内容。

 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>';

 }

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

【讨论】：

还需要定义最后一列有role:tooltip。

【解决方案2】：

你可以把它放到谷歌的可视化游乐场：

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn('number');
    data.addColumn('number');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, base++);
    data.setValue(0, 3, base++);
    data.setValue(0, 4, base++);
    data.setValue(0, 5, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, base++);
    data.setValue(1, 3, base++);
    data.setValue(1, 4, base++);
    data.setValue(1, 5, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}

【讨论】：