时间戳

首页 > 解决方案 > Rpraph 未在画布中显示

javascript - Rpraph 未在画布中显示

问题描述

<canvas id = "myCanvas" height = "385%" width = "100%">  
<script type="text/javascript" charset="utf-8">  <pre>
var c = document.getElementById("myCanvas");  
var ctx = c.getContext("2d");  
var bar = new RGraph.Bar(ctx);  
bar.Set('test', [4.5,3.5,3,4,3.5,2.5,2.5,3]);  
bar.Set('chart.gutter', 7);  
bar.Set('chart.colors', ['blue']);  
bar.Set('chart.labels'["Avengers:InfinityWar","Deadpool2","BlackPanther","Padmavat","Sanju","Gotti","Jurasic World:Fallen World","Rampage"]);
bar.Draw();</pre>
</script>
</canvas>

错误：未捕获的类型错误：无法在文件中的新 RGraph.Bar (file:///F:/New%20folder%20(2)/website/RGraph.bar.js:46:51) 处读取 null 的属性“getContext” :///F:/New%20folder%20(2)/website/online_booking.html:149:14

标签： javascriptrgraph

解决方案

您的配置存在一些问题，其中最值得注意的是 JavaScript 代码不在画布标记之间。因此，更新后的代码是：

<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.bar.js"></script>

<canvas id="myCanvas" height="385" width="900"></canvas>

<script>
    var bar = new RGraph.Bar({
        id: 'myCanvas',
        data: [4.5,3.5,3,4,3.5,2.5,2.5,3],
        options: {
            gutterLeft: 60,
            gutterRight: 25,
            gutterBottom: 60,
            gutterTop: 25,
            colors: ['blue'],
            textSize:16,
            labels: [
                "Avengers:InfinityWar",
                "\r\nDeadpool2",
                "BlackPanther",
                "\r\nPadmavat",
                "Sanju",
                "\r\nGotti",
                "Jurasic World:Fallen World",
                "\r\nRampage"
            ]
        }
    }).draw();
</script>

而且，也许，由于您使用的配置风格，我猜您可能使用的是旧版本的 RGraph - 如果您是，您应该在此处下载最新副本：

https://www.rgraph.net/download.html#stable

推荐阅读