为什么chart.js不在Bootstrap块中显示结果

lyr7nygr  于 2023-01-20  发布在  Chart.js
关注(0)|答案(1)|浏览(224)

html没有显示条形图,而条形图应该是https://www.chartjs.org/docs/latest/getting-started/中的条形图
输入chart.html

  1. {% extends "base.html" %}
  2. {% block js %}
  3. <div>
  4. <canvas id="myChart"></canvas>
  5. </div>
  6. <script src="../static/js/try.js"></script>
  7. {% endblock %}

单位:try.js

  1. import 'https://cdn.jsdelivr.net/npm/chart.js';
  2. const ctx = document.getElementById('myChart');
  3. new Chart(ctx, {
  4. type: 'bar',
  5. data: {
  6. labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  7. datasets: [{
  8. label: '# of Votes',
  9. data: [12, 19, 3, 5, 2, 3],
  10. borderWidth: 1
  11. }]
  12. },
  13. options: {
  14. scales: {
  15. y: {
  16. beginAtZero: true
  17. }
  18. }
  19. }
  20. });
vecaoik1

vecaoik11#

importtry.js中出现故障。
解决方案是在chart.html中重新定位import
chart.html中:

  1. {% extends "base.html" %}
  2. {% block js %}
  3. <div>
  4. <canvas id="myChart"></canvas>
  5. </div>
  6. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  7. <script src="../static/js/try.js"></script>
  8. {% endblock %}

我试过了,奏效了。

相关问题