Question

我是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>

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

Answer 1

当您调用“新图表”时，尚未初始化数据变量。将“新图表”移动到JS块的末尾。

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

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

Answer 2

你没有声明options变量要么为一个空数组传递选项。

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

或声明变量

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

Answer 3

我认为我有一个解决方案＆＃39;选项＆＃39;问题。如果您从以下选项中删除选项：

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主页上的教程在这方面有点令人困惑，因为它告诉您使用主文件中默认设置的数组。但你应该只是采取＆＃34;内部＆＃34;并使用它们，而不是整个事情，并没有说实际为它创建选项变量。我花了一个小时才搞清楚，但这只是因为我犯了一个错误，就是不立即检查JS控制台，正如@Lauris在他的回答中暗示的那样：）

同时确保：

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

指向正确的文件。看起来你只是为了隐藏StackOverflow社区的真实路径。在那种情况下，没关系。

我希望这有帮助！

使用Chart.js显示图表

3 个答案: