Google Stepped Area chart - 自定义工具提示两个动画数据集

Question

我有一个 SteppedArea Google 图表，在为两个数据集设置动画后，我需要自定义工具提示。但不幸的是，它只适用于第二个数据集。我的猜测是，在我的第一个数据集中使用

会有一些问题

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

在我使用的第二个数据集中

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

我尝试在两个数据集中使用 setValue() 函数，但首先出现错误，因为我想设置值时不存在行。

在这两种情况下我都有 addRows()，但由于第二个数据集的动画错误而不得不更改 - 这是解释：Google charts - animation of stepped chart

查看小提琴进行演示：https://codepen.io/jan_cafourek/pen/ybzqRa

提前谢谢你

Answer 1

首先，tooltip 角色列只能代表一个系列列

并且必须遵循他们所代表的系列

要为每个系列提供工具提示，您需要在数据表中添加另一列...

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]);

---

请参阅以下工作 sn-p...

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>