谷歌圖表，你如何顯示額外的信息在講話泡泡的東西

如何將更多的信息附加到谷歌圖表條目。我的線形圖如下：谷歌圖表，你如何顯示額外的信息在講話泡泡的東西

  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使這種毫無意義的我！我曾試着用工具提示添加另一列，但是您怎麼在每個點上添加信息。它很奇怪！

來源

2013-06-24 Jimmyt1988

你需要做的是引入至少一個工具提示欄。每個工具提示列都適用於左側的系列列，所以如果您要在第二列之後插入字符串列，並使其角色爲「工具提示」，那麼您將爲第一系列提供自定義工具提示（從屏幕截圖，它看起來像是藍色系列）。您可以爲每個系列提供工具提示列，這基本上就是您如何獲得每點工具提示。這裏有一個例證的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-24 18:18:06

您也可以使用[HTML工具提示（https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#enabling_html_tooltip）如果你想在那裏有按鈕，圖像或其他內容。 – jmac

試試此代碼使用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-26 09:17:16

谷歌圖表，你如何顯示額外的信息在講話泡泡的東西

回答

相關問題