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

这是因为，您正在尝试获取 reformaTrabalhista.html 中不存在的其他画布元素。

对于所有画布，你应该更好地获得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

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

1 个答案: