Google Steppedarea图表 - 自定义工具提示两个动画数据集

Question

我有一个踩踏车的Google图表，在对两个数据集进行动画操作后，我需要自定义工具提示。但不幸的是，它仅在第二个数据集中起作用。我的猜测是，我的第一个数据集使用

会有一些问题

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

，在第二个数据集中，我正在使用

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

我尝试在两个数据集中使用setValue((函数，但是在第一个数据集中有一个错误，因为当我要设置值时，没有行。

。

我在两种情况下都有Addrows((，但由于第二个数据集的动画错误而必须更改 - 这是解释：Google Charts -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>