Question

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

Answer 1

尝试使用此代码，使用html标记自定义工具提示内容。

 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，其中包含有关折线图的工作样本

Answer 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});
}

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

2 个答案: