0

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

            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],
            ] );

我在哪里可以添加该信息，使其看起来像这样？

在此处输入图像描述

google api对我来说意义不大！！！我已经尝试添加另一个带有工具提示的列，但是你到底如何添加每个点的信息。这太奇怪了！

4

2 回答 2

2

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

    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

于 2013-06-26T09:17:16.610 回答
0

您需要做的是至少引入一个工具提示列。每个工具提示列都适用于紧邻其左侧的系列列，因此如果您要在第二列之后插入一个字符串列，并使其角色为“工具提示”，那么您将拥有第一个系列的自定义工具提示（来自您的屏幕截图，看起来是蓝色系列）。您可以为每个系列设置一个工具提示列，这实际上是您获取每点工具提示的方式。这是一个示例工具提示机制的 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());
}

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

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

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

希望这可以帮助。

于 2013-06-24T18:18:06.460 回答