Question

我正试图得到一个饼图。但是，它运作得不好。该页面完全空白。

我正在使用node.js.我在npm安装了chart.js.我在我的ejs文件上运行这个html，它只是一个空白页面。

<code>
<html>
  <head>
    <script src="../node_modules/chart.js/Chart.min.js"></script>

  </head>
  <body>

     <canvas id="myChart" width="600" height="400"></canvas>
    <script>    
            var data = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                }
            ]

            var pieOptions = {
                segmentShowStroke : false,
                animateScale : true
            }

            var ctx = document.getElementById("myChart").getContext("2d");
            new Chart(ctx).Pie(data, pieOptions);
        </script>       
  </body>
</html>    
</code>

Answer 1

我没有深入阅读您的代码，但我注意到您在文件的头部有您的node.js代码。遗憾的是，node.js不能在浏览器中执行，而是用于代码的服务器端实现。你的控制台说什么？

Answer 2

这是我必须做的。

我将Charts.min.js文件从node_modules复制到公用文件夹。

除此之外，我的画布位于顶部。另外，我不得不改变：

var ctx = document.getElementById（“myChart”）。getContext（“2d”）;

到

var ctx = document.getElementById（'myChart'）。getContext（'2d'）;

我是node.js的新手，我正在努力让饼图工作

2 个答案: