为什么我用 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 中不存在的其他 canvas 元素 reformaTrabalhista.html.

您最好获取 canvas 的上下文，对于所有 canvases，如下所示：

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

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

Why doesn't my donut chart, created with Chart.js, appear?

html

javascript

charts

donut-chart

chart.js