Question

我正在尝试更改我的Google图表工具提示，但它不起作用。根据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);
        }
    });

}

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

Google Chart工具提示不起作用

1 个答案: