程序员经验分享-hwhale

图表js不显示

2024-05-22

我正在尝试使用 Charts.js 创建一个简单的折线图。当我运行下面的代码时，没有出现图表。我究竟做错了什么？我正在关注这个教程http://www.chartjs.org/docs/latest/getting-started/ http://www.chartjs.org/docs/latest/getting-started/ 

<html>
<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>

</head>
<body>


    <h1>Chart.js Sample</h1>

    <canvas id="myChart" width="600" height="400"></canvas>
        <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'line',

      // The data for our dataset
      data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [{
              label: "My First dataset",
              backgroundColor: 'rgb(255, 99, 132)',
              borderColor: 'rgb(255, 99, 132)',
              data: [0, 10, 5, 2, 20, 30, 45],
          }]
      },

      // Configuration options go here
      options: {}
  });
    </script>
</body>
</html>

您使用的版本0.2.0。如果您使用演示中的版本，则可以正常工作（2.4.0）或最新版本（2.6.0）。 CDN 链接是https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js

<html>

<head>
  <meta charset="utf-8" />
  <title>Chart.js demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>

  <h1>Chart.js Sample</h1>

  <canvas id="myChart" width="600" height="400"></canvas>
  <script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: "line",
    
      // The data for our dataset
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
          {
            label: "My First dataset",
            backgroundColor: "rgb(255, 99, 132)",
            borderColor: "rgb(255, 99, 132)",
            data: [0, 10, 5, 2, 20, 30, 45]
          }
        ]
      },
    
      // Configuration options go here
      options: {
        responsive:false,
        maintainAspectRatio: false
      }
    });
  </script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

chartjs

图表js不显示 的相关文章