Question

我的以下代码没有显示任何图表图表，我不确定我做错了什么。它加载了Chart.bundle.js，我也尝试了Chart.js。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="../src/Chart.bundle.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
</head>
<body>
  <div style="width: 75%">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var chartData = {
      graphName : 'daily-visitors',
      ctx : document.getElementById('canvas').getContext('2d'),
      chart : {
      labels: ["19\/12","20\/12","21\/12","22\/12","23\/12","24\/12","25\/12","26\/12","27\/12","28\/12","29\/12","30\/12","31\/12","01\/01","02\/01"],
      datasets: [
        {
          label: 'Visitors',
          data: [4,6,9,6,16,3,13,11,6,4,7,14,11,18,5],
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
        },
      {
        label: 'Pageviews',
        data: [42,34,64,53,48,4,36,36,25,9,12,25,110,227,75],
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
      }]
    }
  };
</script>
</body>
</html>

＆＃13;

Answer 1

您缺少创建图表本身：

var myChart = new Chart(chartData.ctx).Line(chartData.chart); //'Line' defines type of the chart.

Answer 2

您只是定义了对象的外观，但是您忘了自己创建它。

Answer 3

按照CANVAS教程在DOM中添加图表。 http://www.williammalone.com/articles/html5-canvas-javascript-bar-graph/

Chart.js没有显示图表

3 个答案: