Chart.js-多個圖表的工具提示問題

Question

我使用Chart.js（在最新版本2.7中），並且如果我的頁面上有多個圖表，則工具提示有問題。

在這個小提琴上： 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

我已經通過clone每個圖表的配置解決了您的問題。 當前，您使用共享的一個對象config渲染圖表，並且在渲染第二個圖表時更改配置。 因此，您應該為每個圖表克隆配置。

這是我的解決方案（從您的jsfiddle分叉並編輯） 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>