【问题标题】:Google Chart Tooltip Doesn't Work谷歌图表工具提示不起作用
【发布时间】:2016-10-20 17:37:56
【问题描述】:

我正在尝试更改我的 Google 图表工具提示,但它不起作用。根据谷歌,我应该说:

data.addColumn({ type: 'string', role: 'tooltip' });

tooltip: { isHtml: true },

但不起作用。我只是想输入一个短语,相反,他输入了一个默认值。

这是我的代码:

  google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Value');
    **data.addColumn({ type: 'string', role: 'tooltip' });**
    data.addColumn('number', 'Id');

    for (i = 0; i < Object.keys(dataDB).length; i++) {
        var year = dataDB[i].Year.toString();
        var value = (dataDB[i].Value);
        var message = "test";
        var id = (dataDB[i].Id);
        data.addRow([year, value, message, id]);
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
                     {
                         calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation"
                     }]);

    var options = {
        width: 1000,
        height: 400,
        focusTarget: 'category',
        hAxis: { textPosition: 'none' },
        legend: { position: 'none' },
        chartArea: { left: 50, top: 30, width: "70%", height: "200%" },
        bar: { groupWidth: "65%" },            
        tooltip: { isHtml: true },

    };

    var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ ' });
    formatter.format(data, 1);

    var chart = new google.visualization.BarChart(document.getElementById("divResult"));
    chart.draw(view, options);

    google.visualization.events.addListener(chart, 'select', function () {
        var selection = chart.getSelection();
        if (selection.length) {
            var row = selection[0].row;
            var _year = data.getValue(row, 0);
            var _id = data.getValue(row, 3);
            CallMensal(_id, _year);
        }
    });

}

【问题讨论】:

    标签: javascript charts google-visualization tooltip


    【解决方案1】:

    还需要添加列属性

                                                      // col prop
    data.addColumn({ type: 'string', role: 'tooltip', p: {html: true}});
    

    编辑

    该列还需要包含在用于绘制图表的view

    使用view.setColumns时包含列索引

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2, {
      calc: 'stringify',
      sourceColumn: 1,
      type: 'string',
      role: 'annotation'
    }]);
    

    【讨论】:

    • 请参阅this recent answer 了解工作示例...
    • 它正在被删除 --> view.setColumns
    • 非常感谢,它成功了。但是,我只想显示消息。相反,它向我显示了所有信息(年份、价值和消息)。你知道我该如何解决它吗?
    猜你喜欢
    • 2020-08-09
    • 2013-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多