没有图表出现 - Chart.js

Question

我对 JavaScript 不是很有经验并且对 chart.js 有点困难我无法显示 chart.js 图表。我已经尝试了一切，但一无所获；下面我给你留下了部分代码和“图形”外观的照片。提前致谢

<h5 class="card-title">Line Chart</h5>
     <div style="height: 400px">
     <canvas id="line-char"></canvas>
     <script>
    const ctx = document.getElementById('myChart');
    const ctx = document.getElementById('myChart').getContext('2d');
    const ctx = $('#myChart');
    const ctx = 'myChart';
    </script>
      <canvas id="line-char"></canvas>
    <script>
    const ctx = document.getElementById('line-char');
    const line_char = 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: {
    y: {
    beginAtZero: true
    }
    }
    }
    });
    </script>

Image link

Answer 1

您的图表配置在 backgroundColor 和 borderColor 中包含无效字符（‘ 而不是 '）。

‘rgba(75, 192, 192, 0.2)',

请查看下面修改后的可运行代码，看看它现在是如何工作的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<h5 class="card-title">Line Chart</h5>
<div style="height: 400px">
  <canvas id="line-char"></canvas>
  <script>
    new Chart('line-char', {
      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: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</div>

没有图表出现 - Chart.js

No chart appears - Chart.js

javascript

graph

chart.js