Question

如何将更多信息附加到Google图表条目。我的折线图有以下内容：

            data.addColumn('date', 'Date');   
            data.addColumn('number', 'a name');                 
            data.addColumn('number', 'a name 2');                 
            data.addColumn('number', 'a name 3');                 

            data.addRows( [
                [new Date( 2013,  7,  1 ),1.5,null,null],
                [new Date( 2013,  6,  28 ),-1.5,null,null],
                [new Date( 2013,  6,  21 ),null,-1,null],
                [new Date( 2013,  6,  15 ),null,0,2],
                [new Date( 2013,  6,  7 ),1.5,null,null],
                [new Date( 2013,  6,  5 ),-1,null,null],
               [new Date( 2013,  6,  1 ),0.5,2,null],
            ] );

我可以在哪里添加该信息，使其显示如下？

enter image description here

谷歌api对我这么有意义!!!我尝试使用工具提示添加另一个列，但接下来你是如何在每个点添加信息的。这太奇怪了！

Answer 1

尝试使用此代码，使用html标记自定义Tooltip内容。

    data.addRows([
['2010', 600, customTooltip('$600K in our first year!')],
['2011', 1500, customTooltip('Sunspot activity made this our best year ever!')],
['2012', 800, customTooltip('$800K in 2012.')],
['2013', 1000, customTooltip('$1M in sales last year.')]
]);


function customTooltip(text) { 
    return '<div style="padding:5px 5px 5px 5px;">' +
'<table id="medals_layout">' + '<tr>' +
'<td><b>' + text + '</b></td>' + '</tr>' + '</table>' + '</div>';

}

看看这个有工作样本的jqfaq.com

Answer 2

您需要做的是引入至少一个工具提示列。每个工具提示列都会立即应用于其左侧的系列列，因此，如果您要在第二列之后插入字符串列，并将其角色设置为“工具提示”，那么您将拥有第一个系列的自定义工具提示（来自您的屏幕截图，它看起来像是蓝色系列）。您可以为每个系列提供工具提示列，这实际上就是您获得每点工具提示的方式。这是一个例证工具提示机制的jsfiddle：http://jsfiddle.net/vD2pk/

function createData1() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});

    data.addRow([{v:1}, {v:2}, {v:'hi'}, {v:5}]);
    data.addRow([{v:2}, {v:1.5}, {v:null}, {v:10}]);
    data.addRow([{v:4}, {v:3}, {v:'nooo'}, {v:8}]);
    return data;
}

function createData2() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});

    data.addRow([{v:1}, {v:2}, {v:5}, {v:'hi'}]);
    data.addRow([{v:2}, {v:1.5}, {v:10}, {v:null}]);
    data.addRow([{v:4}, {v:3}, {v:8}, {v:'nooo'}]);
    return data;
}

function createData3() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});

    data.addRow([{v:1}, {v:2}, {v:'test'}, {v:5}, {v:'hi'}]);
    data.addRow([{v:2}, {v:1.5}, {v:'test2'}, {v:10}, {v:null}]);
    data.addRow([{v:4}, {v:3}, {v:null}, {v:8}, {v:'nooo'}]);
    return data;
}

function drawChart(divId, data) {
  var chart = new google.visualization.LineChart(
      document.getElementById(divId));
  chart.draw(data, {
    width: 556, height: 347
  });
}

function drawVisualization() {
  drawChart('visualization1', createData1());
  drawChart('visualization2', createData2());
  drawChart('visualization3', createData3());
}

在小提琴中，第一个例子在第一个系列（蓝色）上有工具提示。您会注意到第二个点没有自定义工具提示，这使其默认为常规工具提示。

第二个示例在第二个系列（红色）上有工具提示。

最后，第三个例子在两者上都有工具提示。

希望这有帮助。

Google图表，如何在讲话泡泡中显示额外信息

2 个答案: