Question

我正在使用chart.js，这非常方便，但当我点击arabic时，我会遇到意外行为。值正确更改，但如果我将鼠标悬停在bars上，则会显示english值，但Pages和views数组都包含arabic值。

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>

这是显示问题的fiddle

Answer 1

您需要在创建新图表之前销毁现有图表。像

这样的东西

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

您也可以通过更新积分并致电update()来做类似的事情，但到目前为止destroy()更容易。

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

注意：删除现有的canvas元素并添加一个新元素时，看起来也很有效（正如你的评论和问题的上一个版本所述），responsive: true，Chart.js循环所有已创建的图形实例都会调整它们的大小，导致每个响应图形的控制台错误已创建并删除但未被销毁。

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

chart.js的意外行为

1 个答案: