Chartjs 图表未使用 pug 模板呈现答案

【问题标题】：Chartjs chart not rendering with pug templateChartjs 图表未使用 pug 模板呈现
【发布时间】：2017-09-07 03:11:41
【问题描述】：

我正在尝试使用 chartjs 在 pug 模板中呈现图表，但由于某种原因它无法正常工作，谁能看到我做错了什么？哈巴狗文件加载得很好，但上面没有图表。这是我的哈巴狗模板：

div(class="main container-fluid text-center")
    div(class="choices")
        h2
        p I'm voting for:
        select(class="form-control")
            option 1
            option 2
            option 3
            option 4
            option 5
    div(class="chart")        
    canvas(id="chartPic" width="400" height="400")
script(src="chart.js")
script. 
    -window.onload(
    -var ctx = document.getElementById("chartPic").getContext('2d');
       -var chart = new Chart(ctx,  {
            -type: 'pie',
            -data: {
                -labels: ["red", "green", "blue"],
                -datasets: [{
                    -label: 'Number of votes',
                    -data: [1, 1, 1],
                    -backgroundColor: ['red', 'green', 'blue'],
                    -borderColor: ['green', 'blue', 'red'],
                    -borderWidth: 1
                }],
                },
            -options: {
                -title: { 
                    -display: true,
                    -text: "chart",
                },
                -legend: {
                    -position: 'bottom'
                },
            }
        });
        );

【问题讨论】：

标签： node.js express pug chart.js

【解决方案1】：

您的代码有两个问题...

1 . 语法错误！你需要把,放在data对象的末尾

2 . 您需要将颜色值作为字符串传递（除非它们是预定义变量）

另外，您可能应该将图表生成代码包装在窗口 onload 事件中，以确保在成功加载 chart.js 脚本之前不会执行代码。

div(class="main container-fluid text-center")
    div(class="choices")
        h2
        p I'm voting for:
        select(class="form-control")
            option 1
            option 2
            option 3
            option 4
            option 5
    div(class="chart")        
    canvas(id="chartPic" width="400" height="400")
script(src="chart.js")
script. 
    -window.onload = function() {
    -var red="#{red}", green="#{green}", blue="#{blue}";
    -var ctx = document.getElementById("chartPic").getContext('2d');
       -var chart = new Chart(ctx,  {
            -type: 'pie',
            -data: {
                -labels: ["red", "green", "blue"],
                -datasets: [{
                    -label: 'Number of votes',
                    -data: [1, 1, 1],
                    -backgroundColor: [red, green, blue],
                    -borderColor: [green, blue, red],
                    -borderWidth: 1
                }],
                },
            -options: {
                -title: { 
                    -display: true,
                    -text: "chart",
                },
                -legend: {
                    -position: 'bottom'
                },
            }
        });
        };

另外，看看这个working chart demo on JSFiddle^raw-js

【讨论】：

谢谢！虽然它仍然没有呈现，我没有收到任何错误，但它也没有出现？
hmm.. 那么模板可能有问题
页面的第一部分渲染得很好，只是图表没有渲染，所以看起来模板没问题，但我认为图表有问题。不过我可能是错的..
正如您在演示中清楚地看到的那样，图表运行良好。尝试将图表生成代码放入window.onload event
您的window.onload 事件不正确。应该是window.onload = function() {... codes to exec. ...}