Chart.js 出现空白

问题描述

我在普通 JavaScript 页面中使用 chart.js，但图表显示为空白。我在 Google Chrome 控制台中没有收到任何错误。下面是我正在使用的代码

ImageName

chart.js 可以与纯 JavaScript 一起使用吗？我使用的代码有什么问题吗？

解决方法

请在配置中分配数据键来分配图表数据

const labels = [
  'January','February','March','April','May','June',];
const chartData = {
  labels: labels,datasets: [{
    label: 'My First dataset',data: [0,10,5,2,20,30,45],}]
};

const config = {
  type: 'line',data: chartData,options: {}
};


var myChart = new Chart(
  document.getElementById('myChart'),config
);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="container">
  <div>
    <canvas id="myChart" width="200" height="200"></canvas>
  </div>
</div>