Question

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

错误：未被捕获的TypeError：无法读取null的属性'getContext' 在新的RGraph.Bar（文件：/// F：/ New％20folder％20（2）/website/RGraph.bar.js:46:51）在file：/// F：/ New％20folder％20（2）/website/online_booking.html:149:14

Answer 1

您的配置存在一些问题，最值得注意的是JavaScript代码不在canvas标签之间。因此，更新后的代码为：

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

这里有一个演示：

https://www.rgraph.net/fiddle/view.html/stackoverflow-question

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

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

Rpraph没有显示在画布上

1 个答案: