Google SteppedArea圖表 - 自定義工具提示兩個動畫數據集

Question

我有一個SteppedArea Google圖表，我需要在爲這兩個數據集設置動畫後自定義工具提示。但不幸的是，它僅適用於第二個數據集。我的猜測是，會有一些問題，在使用

data1.addRows([values[1][index]]); 

和我的第一個數據集在第二數據集我使用

data1.setValue(index2, 1, values[0][index2][1]); 

我試圖USET中都的setValue（）函數數據集，但在第一個有一個錯誤，因爲當我想要設置值時沒有行存在。

我addRows（）在這兩種情況下，卻不得不改變由於第二個數據集的錯誤動畫 - 這裏的解釋：Google charts - animation of stepped chart

見搗鼓示範：https://codepen.io/jan_cafourek/pen/ybzqRa

預先感謝您

Answer 1

第一，提示作用列可能僅僅代表一個系列列

，並且必須遵循他們所代表

系列

有一個提示爲每個系列中，你將需要另一列添加到數據表...

var data1 = new google.visualization.DataTable(); 
data1.addColumn("number", "Year"); 
data1.addColumn("number", "One"); 
data1.addColumn({type:'string', role: 'tooltip'}); // <-- tooltip for "One" 
data1.addColumn("number", "Two"); 
data1.addColumn({type:'string', role: 'tooltip'}); // <-- tooltip for "Two" 

這將改變陣列數據的結構...

var values = [ 
    [ 
    [1, 1.22, 'tooltip one', null, null], 
    [2, 1.22, 'tooltip one', null, null], 
    [3, 1.22, 'tooltip one', null, null], 
    [4, 1.22, 'tooltip one', null, null], 
    [5, 1.22, 'tooltip one', null, null], 
    [6, 1.55, 'tooltip one', null, null], 
    [7, 1.55, 'tooltip one', null, null], 
    [8, 1.55, 'tooltip one', null, null], 
    [9, 1.90, 'tooltip one', null, null], 
    [10, 1.90, 'tooltip one', null, null] 
    ], 
    [ 
    [1, null, null, 2.11,'tooltip two'], 
    [2, null, null, 2.11,'tooltip two'], 
    [3, null, null, 2.11,'tooltip two'], 
    [4, null, null, 0.80,'tooltip two'], 
    [5, null, null, 0.80,'tooltip two'], 
    [6, null, null, 0.80,'tooltip two'], 
    [7, null, null, 0.80,'tooltip two'], 
    [8, null, null, 1.00,'tooltip two'], 
    [9, null, null, 2.10,'tooltip two'], 
    [10, null, null, 2.10,'tooltip two'] 
    ] 
]; 

最後，你只能在同一時間使用setValue設置一個列值，

所以需要添加其他setValue工具提示...

data1.setValue(index2, 1, values[0][index2][1]); 
data1.setValue(index2, 2, values[0][index2][2]); 

---

看到下面的工作片段...

google.charts.load("current", { 
 
    callback: function() { 
 
    drawStepChart(); 
 
    }, 
 
    packages: ["corechart", "table"] 
 
}); 
 

 
// two sets of values 
 
var values = [ 
 
    [ 
 
    [1, 1.22, 'tooltip one', null, null], 
 
    [2, 1.22, 'tooltip one', null, null], 
 
    [3, 1.22, 'tooltip one', null, null], 
 
    [4, 1.22, 'tooltip one', null, null], 
 
    [5, 1.22, 'tooltip one', null, null], 
 
    [6, 1.55, 'tooltip one', null, null], 
 
    [7, 1.55, 'tooltip one', null, null], 
 
    [8, 1.55, 'tooltip one', null, null], 
 
    [9, 1.90, 'tooltip one', null, null], 
 
    [10, 1.90, 'tooltip one', null, null] 
 
    ], 
 
    [ 
 
    [1, null, null, 2.11,'tooltip two'], 
 
    [2, null, null, 2.11,'tooltip two'], 
 
    [3, null, null, 2.11,'tooltip two'], 
 
    [4, null, null, 0.80,'tooltip two'], 
 
    [5, null, null, 0.80,'tooltip two'], 
 
    [6, null, null, 0.80,'tooltip two'], 
 
    [7, null, null, 0.80,'tooltip two'], 
 
    [8, null, null, 1.00,'tooltip two'], 
 
    [9, null, null, 2.10,'tooltip two'], 
 
    [10, null, null, 2.10,'tooltip two'] 
 
    ] 
 
]; 
 

 
function drawStepChart() { 
 
    var data1 = new google.visualization.DataTable(); 
 
    data1.addColumn("number", "Year"); 
 
    data1.addColumn("number", "One"); 
 
    data1.addColumn({type:'string', role: 'tooltip'}); 
 
    data1.addColumn("number", "Two"); 
 
    data1.addColumn({type:'string', role: 'tooltip'}); 
 

 
    var options = { 
 
    animation: { duration: 50 }, 
 
    areaOpacity: 0 
 
    }; 
 

 
    var stepchart = new google.visualization.SteppedAreaChart(
 
    document.getElementById("step") 
 
); 
 

 
    var index = 0; 
 
    var index2 = 0; 
 
    var animate1 = function() { 
 
    if (index < values[1].length) { 
 
     data1.addRows([values[1][index]]); 
 
     stepchart.draw(data1, options); 
 
     index++; 
 
    } else { 
 
     if (index2 < values[0].length) { 
 
     data1.setValue(index2, 1, values[0][index2][1]); 
 
     data1.setValue(index2, 2, values[0][index2][2]); 
 
     stepchart.draw(data1, options); 
 
     index2++; 
 
     } 
 
    } 
 
    }; 
 
    google.visualization.events.addListener(
 
    stepchart, 
 
    "animationfinish", 
 
    animate1 
 
); 
 
    stepchart.draw(data1, options); 
 
    animate1(); 
 
}

#step { 
 
    width: 100%; 
 
    height: 500px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="step"></div>