javascript - 为什么我用 Chart.js 创建的圆环图没有出现？

Question

我用 Chart.js 创建了一些图表，它们在我的网站上 [ http://projetoplenario.com/proposicoes.html] .我试图在我网站的其他 html 页面上插入相同的图表，但它不起作用。

例如，让我们考虑 proposicoes.html 的第一个图表。它被命名为“reformaTrabalhistaChart”。在reformaTrabalhista.html [ http://projetoplenario.com/reformaTrabalhista.html]还有用于插入图表的代码。

但是，我不知道为什么，它在reformaTrabalhista.html 上不起作用并且在proposicoes.html 上起作用。

如何在reformaTrabalhista.html 上插入相同的图表？

<div class="boxChart">
  <a href="reformaTrabalhista.html">
    <canvas id="reformaTrabalhistaChart"></canvas>
  </a>
</div>

<div class="boxChart">
  <canvas id="reformaTrabalhistaChart"></canvas>
</div>

var reformaTrabalhistaChart;
var data = [
  {
    value: 50,
    color: "green"
  }, {
    value: 26,
    color: "red"
  }, {
    value: 1,
    color: "orange"
  }, {
    value: 1,
    color: "purple"
  }, {
    value: 3,
    color: "gray"
  }
];

var options = {
  animation: true,
  animationEasing: 'easeInOutQuart',
  animationSteps: 80
};

//Get the context of the canvas element we want to select
var ctx = document.getElementById("reformaTrabalhistaChart")
                  .getContext("2d");

reformaTrabalhistaChart = new Chart(ctx).Doughnut(data, options);

Answer 1

这是因为，您正在尝试获取 中不存在的其他 Canvas 元素。改革Trabalhista.html .

对于所有 Canvas ，您应该更好地获取 Canvas 的上下文，如下所示:

var canvas = document.getElementById("canvas-id-here");
var ctx = canvas && canvas.getContext("2d");

并定义图表实例，如下所示:

chart-variable-name = ctx && new Chart(ctx).Doughnut(data, options);

这是 的修改版mycharts.js - https://kopy.io/0HiRj