EJS 标签与 ChartJS？

问题描述 投票：0回答：3

是否可以使用EJS标签将数据添加到图表中？这是我当前图表的数据：

var canvas = document.getElementById('myChart');
var data = {
    labels: ["One", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [10, 20, 81, 56, 55, 40],
        }
    ]
};

我想做这样的事情：

labels: ["<%= currentUser.datapoint1 %>", "<%= currentUser.datapoint2 %>", "<%= currentUser.datapoint3 %>"]

data: [<%= currentUser.datapoint10 %>, <%= currentUser.datapoint11 %>]

如何使用 EJS 标签来填充图形数据？ （注意：在需要生成图表之前，EJS 标签信息已经保存给用户）

node.js mongodb express chart.js ejs
3个回答
9
投票

是的，您可以使用 EJS 标签或在各种 

view
javascript 框架中使用的任何其他类似标签（例如，流星、ejs 中的把手、空格键等）。 Chart.js 在运行时初始化，因此它不知道数据如何进入文件（例如，它不知道……也不关心……您的 javascript 是经过预处理和生成的） .

标签本身的格式只与存储数据的变量有关。我建议将 

labels
和 
data
存储在数组中并使用 
JSON.stringify()
。

// defined in your app
var labels = ['label 1', 'label 2', ...];
var data = [datapoint1, datapoint2, ...];

// in your EJS file.
var canvas = document.getElementById('myChart');
var data = {
  labels: <%- JSON.stringify(labels); %>,
  datasets: [
    {
      label: "My First dataset",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: <%- JSON.stringify(data); %>,
    }
  ]
};
0
投票

最简单的方法是在 EJS 标签中使用 

JSON.stringify()
。你可以做的

labels: <%- JSON.stringify(data.labels); %>,
data: <%- JSON.stringify(data.datasets.data); %>

它基于您的 

data
变量。因此，您可能需要相应地调整此代码。

0
投票

举个例子，修改 Google 图表快速入门示例 会有很大帮助。我尝试了以下方法，但没有成功。

两个文件： Chart.js 创建要渲染的数据和 Chart.ejs 模板L:

这是我到目前为止整理的内容： chart.js

import { dirname } from "path";
import express from "express"
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url));
let myData = [
  ['Mushrooms', 3],
  ['Onions', 1],
  ['Olives', 1],
  ['Zucchini', 1],
  ['Pepperoni', 2],
  ['Pineapple',12],
  ['Green Peppers',22]
  ]
  
  let myGraph ={}
  myGraph.name="First Chart"
  myGraph.myData=myData

  const app = express();

  app.get('/', (req, res) => {
    const templatePath = __dirname+"/views/chart.ejs";
    res.render(templatePath,{ graphs: myGraph })
    
});

  app.listen(3000, () => {
    //openBrowser('http://localhost:3000');
    console.log("Server running on localhost:3000")
  });

和chart.ejs

这是我到目前为止所拥有的：

<!DOCTYPE html>
<html lang="en">

</html>
<html>

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawGraphs);


        function drawGraphs() {
            appendDivToBody(graphs.name, 'width: 1200px; height: 500px');
        const graphs = <%= JSON.stringify(graphs) %>;
            graphs.forEach(g => {
              appendDivToBody(g.name, 'width: 1200px; height: 500px');
              drawGraph(g.name, g.myData);
            });
        }

        function drawGraph(graphName, graphData) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Toppings');
            data.addColumn('number', 'Slices');
            data.addRows(graphData);
            var options = {
                title: `${graphName}`,
                'width': 500,
                'height': 300
            };
            var chart = new google.visualization.PieChart(document.getElementById(graphName));
            chart.draw(data, options);
        }

        function appendDivToBody(id, style) {
            var div = document.createElement('div');
            div.id = id;
            div.style = style;
            document.getElementsByTagName('body')[0].appendChild(div);
        }

    </script>
</head>

<body>
    <% console.log(graphs.name) %>
    <% console.log(graphs.myData) %>

    <p>
        <!-- HTML content goes here -->
        Hello
    </p>
    <ul>
        <%graphs.myData.forEach((item)=> { %>
            <li>
                I had <%=item[1] %> slices of <%=item[0]%> pizza </br>
            </li>
            <%})%>
    </ul>

</body>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.