javascript - Chart.js - 多个图表的工具提示问题

Question

我使用 Chart.js(最新版本 2.7)，如果我的页面上有多个图表，则工具提示会出现问题。

在这个 fiddle 上:https://jsfiddle.net/b4up8kw2/ ，我有 2 个图表，但如果您看一下，第一个图表(左侧)的工具提示显示了第二个图表的值。

我使用此代码来更新图表的数据集:

var configs = [];
var charts = [];
configs['chart1'] = config;
configs['chart2'] = config;

// update chart - randomScalingFactor() return random integer
function updateChart(chart) {
  // set new values
  configs[chart].data.datasets.forEach(function(dataset) {
    dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  });

  charts[chart].update();
}

$(function() {
  charts['chart1'] = new Chart($('#canvas-1')[0].getContext('2d'), configs['chart1']);
  charts['chart2'] = new Chart($('#canvas-2')[0].getContext('2d'), configs['chart2']);

  for (var key in charts) {
    updateChart(key);
  }
});

我不明白，因为我使用了 2 个单独的配置变量。这是我的代码或插件的错误吗？

Answer 1

我已经通过克隆每个图表的配置解决了您的问题。目前，您使用一个对象config来渲染图表，该对象是共享的，并且当渲染第二个图表时，配置会发生更改。因此，您应该克隆每个图表的配置。

这是我的解决方案(从你的 jsfiddle fork 和编辑)https://jsfiddle.net/huynhsamha/bdvw1e98/

const clone = (o) => JSON.parse(JSON.stringify(o))

var configs = {
    chart1: clone(config),
    chart2: clone(config)
};

<script async src="//jsfiddle.net/huynhsamha/bdvw1e98/embed/js,html,css,result/dark/"></script>