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>