chart.js发生意外行为

Question

我正在使用chart.js ，它非常方便，但是单击arabic时我遇到了意外的行为。 值正确更改，但是如果将鼠标悬停在bars ，尽管Pages和views数组都具有arabic值，但它会显示english值。

 var Pages = []; var viewers = []; var keys = []; var countryvalue = []; var lang = 'english'; function fillArray(language) { if (language == 'english') { Pages = ['home', 'about', 'contact']; viewers = [5, 2, 3]; } else if (language == 'arabic') { Pages = ['arabic home', 'arabic about', 'arabic contact']; viewers = [7, 1, 2]; } } function getPages(lang) { Pages = []; viewers = []; fillArray(lang); drawBar(); } function drawBar() { var randomScalingFactor = function() { return Math.round(Math.random() * 100) }; var barChartData = { labels: Pages, datasets: [{ fillColor: "rgba(151,187,205,0.5)", strokeColor: "rgba(151,187,205,0.8)", highlightFill: "rgba(151,187,205,0.75)", highlightStroke: "rgba(151,187,205,1)", data: viewers }] } var ctx = document.getElementById("canvas").getContext("2d"); window.myBar = new Chart(ctx).Bar(barChartData, { responsive: true }); } getPages(lang); $('.languageSwitcher').on('click', function(e) { e.preventDefault(); if ($(this).data('lang') != lang) { lang = $(this).data('lang'); getPages(lang); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <div class="barContainer"> <canvas id="canvas"></canvas> </div> <a class="languageSwitcher" data-lang="english">English</a> <a class="languageSwitcher" data-lang="arabic">Arabic</a> 

这是一个显示问题的小提琴

Answer 1

您需要先破坏现有图表，然后再创建新图表。 所以像

var ctx = document.getElementById("canvas").getContext("2d");
if (window.myBar)
   window.myBar.destroy();
...

您也可以通过更新点并调用update()来做类似的事情，但是到目前为止， destroy()更容易。

---

小提琴-https: //jsfiddle.net/jzq5umfm/

---

注意：在删除现有的canvas元素并添加一个新的canvas元素时，似乎也可以正常工作（如您的评论和问题的先前版本中所述），并且使用response responsive: true ，Chart.js在所有创建的图形实例之间循环以调整大小它们会导致已创建和删除但未销毁的每个响应图的控制台错误。

对于responsive: false您不会看到控制台错误，但是您仍然可以引用那些未使用的实例。