在流星中使用chart.js时出现'Chart is not defined'错误

Question

我在我的流星应用中使用官方chart.js atmosphere package。我试过运行示例图表来查看是否可以将其拉起来，但是我收到一个问题，说“ReferenceError：Chart is not defined”

下面是我安装气氛软件包和运行代码生成图表。

1. 安装的软件包与流星添加图表：图表
2. 在我的HTML我添加canvas标签调用图表与它的情报
3. 在JS我补充说，与它相关的一起创建图表的功能信息

但是，当我进入页面时，我只是得到一个空的400x400图像，这是一个画布，但是图表应该是没有内容的地方。有人能帮助我弄清楚为了让图表出现而缺少的步骤吗？

HTML

<template name="Home_page"> 
<canvas id="myChart" width="400" height="400"></canvas> 
</template> 

JS

import './home-page.html'; 


Template.Home_page.onRendered(function homePageOnRendered() { 
var ctx = document.getElementById("myChart").getContext("2d"); 
    var myChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
      datasets: [{ 
       label: '# of Votes', 
       data: [12, 19, 3, 5, 2, 3], 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(153, 102, 255, 0.2)', 
        'rgba(255, 159, 64, 0.2)' 
       ], 
       borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(153, 102, 255, 1)', 
        'rgba(255, 159, 64, 1)' 
       ], 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      } 
     } 
    }); 
}); 

Answer 1

好，我忘了在我的js文件的顶部添加

import Chart from 'chart.js' 

。这解决了它。