Chart.js显示无图

我的下面的代码不显示任何图表图形，我不知道我做错了什么。它加载Chart.bundle.js，我也用Chart.js试过。Chart.js显示无图

<!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>

来源

2017-01-02 shin

请通过JSFiddle或其他方式添加一个工作示例 –

你缺少创建图表本身：

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

来源

2017-01-02 07:21:37 wscourge

你只定义了对象应该什么样子，但你忘了创建它自己。

来源

2017-01-02 07:25:26 supereschek

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

来源

2017-01-02 08:07:31 yojna

Chart.js显示无图

回答

相关问题