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

首先，工具提示角色列可能只代表一个系列列

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

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

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

请参阅以下工作代码段...

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: