Chart.js 出现空白

Question

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

<!DOCTYPE html>
<html lang="en">
<head th:replace="fragments/header :: head('Home')"></head>
<body>
    <header th:replace="fragments/header :: header"> </header>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div class="container">
        <div>
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>
    </div>

    <script>
    const labels = [
          'January',
          'February',
          'March',
          'April',
          'May',
          'June',
        ];
        const chartData = {
          labels: labels,
          datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
          }]
        };
        
        const config = {
                  type: 'line',
                  chartData,
                  options: {}
                };
        
    
      var myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
    </script>

    <!-- Bootstrap core JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>
</body>

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

Answer 1

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

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>

Chart.js 出现空白

Chart.js coming up as blank

chart.js

chart.js3