Google Charts API折線圖 - 如何在懸停時顯示多個值？

使用谷歌的折線圖時，如果將鼠標懸停在某個點上，它會提供有關該點的信息。例如，如果一個點在x:3, y:50和y軸被稱爲英寸，懸停在點看起來是這樣的：Google Charts API折線圖 - 如何在懸停時顯示多個值？

.----------. 
|3   | 
|Inches: 50| 
`----------`

當我得到我的數據，每個點也存儲了額外的價值。所以，我的數組類似：[[3, 50, 20], [4, 52, 22], [5, 54, 24]]，當我將鼠標懸停我希望它看起來像這樣：

.----------. 
|Time: 3 | 
|Inches: 50| 
|Extra: 20 | 
`----------`

所以，我有兩個問題是：

如何添加「時間：'我的x值之前的標籤？
如何添加要顯示的第三個值？

這是我的代碼。它所做的是創建第二行，而不是將數據添加在一起。 You can look here看看我的意思。你也可以將鼠標懸停在點上，看看我在懸停的時候在說些什麼。我確信有一個簡單的方法來做到這一點，我只是想念一些東西。

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['Time', 'Inches', 'Extra'], 
     [ 3 , 50 , 20 ], 
     [ 4 , 52 , 22 ], 
     [ 5 , 54 , 24 ] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {title: 'Inches', maxValue: 10}, 
        hAxis: {title: 'Time'}} 
     ); 
} 

google.setOnLoadCallback(drawVisualization);

來源

2012-11-28 Aust

我找到了解決方案。這不是我最喜歡的，因爲重複數據並不是最有效的方式，但無論如何，這是一個解決方案，所以我會在這裏發佈它。

第一個問題來自我創建數據表的方式。 arrayToDataTable是有用的，但它是有限的。所以我離開了那個。這使我可以添加自己的列，並在創建這些列時更具描述性。例如，什麼是關鍵是分配role。所以我創建了我將用來繪製圖表的前兩列，然後添加了第三列，其類型爲string，作用爲tooltip。

當我將數據添加到我的圖表時，對於第三列，當我將鼠標懸停在某個點上時，我正好傳遞了我想要顯示的內容。這就是重複數據的來源。這不是什麼大不了的事情，但我認爲可能有更好的/更直接的方式。不管怎麼說，here is a link to my new chart，這裏是我的代碼：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Time'); 
    data.addColumn('number', 'Inches'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 

    data.addRow(['3', 50, 'Time: 3\n Inches: 50\n Extra: 20']); 
    data.addRow(['4', 52, 'Time: 4\n Inches: 52\n Extra: 22']); 
    data.addRow(['5', 54, 'Time: 5\n Inches: 54\n Extra: 24']); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {title: 'Inches', maxValue: 10}, 
        hAxis: {title: 'Time'}} 
     ); 
} 

google.setOnLoadCallback(drawVisualization);

來源

2012-11-28 18:54:47 Aust

我解決了這個加入「focusTarget： '類'」來選擇：

draw(data,{..., focusTarget: 'category'}

來源

2013-12-03 14:12:50 Darkland

Google Charts API折線圖 - 如何在懸停時顯示多個值？

回答

相關問題