使用chart.js显示图表

Displaying a chart using Chart.js

本文关键字：显示图 js chart 使用      更新时间：2024-03-01

我对JavaScript和HTML5很陌生。我正在尝试使用chart.js在画布上打印一个普通的折线图。我在他们的网站上遵循了循序渐进的指南，但无法显示图表。

这是当前代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CHARTS</title>
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
</head>
<body>
<canvas id="myCanvas" width="800" height="500" style="border:dashed #FF0000">Aw Snap!</canvas>
<script>
context = document.getElementById('myCanvas').getContext('2d');
var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}
Line.defaults = {
    //Boolean - If we show the scale above the chart data           
    scaleOverlay : false,
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The scale starting value
    scaleStartValue : null,
    //String - Colour of the scale line 
    scaleLineColor : "rgba(0,0,0,.1)",
    //Number - Pixel width of the scale line    
    scaleLineWidth : 1,
    //Boolean - Whether to show labels on the scale 
    scaleShowLabels : true,
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    //Number - Scale label font size in pixels  
    scaleFontSize : 12,
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    //String - Scale label font colour  
    scaleFontColor : "#666",    
    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,
    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",
    //Number - Width of the grid lines
    scaleGridLineWidth : 1, 
    //Boolean - Whether the line is curved between points
    bezierCurve : true,
    //Boolean - Whether to show a dot for each point
    pointDot : true,
    //Number - Radius of each point dot in pixels
    pointDotRadius : 3,
    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,
    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,
    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,
    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,
    //Boolean - Whether to animate the chart
    animation : true,
    //Number - Number of animation steps
    animationSteps : 60,
    //String - Animation easing effect
    animationEasing : "easeOutQuart",
    //Function - Fires when the animation is complete
    onAnimationComplete : null
}
new Chart(context).Line(data,options);
</script>
</body>

我做错了什么导致我的图表无法显示？

调用"new Chart"时，数据变量尚未初始化。将"新图表"移动到JS块的末尾。

提示-使用JS控制台检查错误。

编辑：还有两个JavaScript错误-选项变量未初始化，行是未定义的变量。请查看我下面的回复以获取演示链接。

您没有声明options变量，也没有为options传递空数组。

new Chart(context).Line(data,{});

或者声明变量

var options = { ... } 
new Chart(context).Line(data, options);

我想我有一个解决"选项"问题的方法。如果从中删除选项

new Chart(context).Line(data,options);

所以看起来是这样的：

new Chart(context).Line(data);

它有效吗？

这是因为

Line.defaults = { ... }

只是你可以更改的选项列表——你不应该把整个东西放在html文件中。

换句话说，而不是例如：

Line.defaults = { scaleOverlay : true, scaleOverride : true }

尝试：

var options = { scaleOverlay : true, scaleOverride : true }

chartjs主页上的教程在这方面有点令人困惑，因为它告诉您使用主文件中默认的一系列设置。但你应该只取"内部"并使用它们，而不是整个东西，它并没有说要为它实际创建选项变量。我花了一个小时才弄清楚，但这只是因为我犯了一个错误，没有立即查看JS控制台，正如@Lauris在回答中暗示的那样：）

还要确保：

<script src="../../../Downloads/Chart.js-master/Chart.js"></script>

指向正确的文件。看起来你这样做只是为了向StackOverflow社区隐藏真实路径。那样的话没关系。

我希望这能有所帮助！

相关文章：