Charts 海图的PUG绘制
我有问题，试图让这个图表呈现在帕格。我想把chartJS代码放在它自己的文件夹中，然后在一个PUG模板中呈现它。你能解释一下我做错了什么，或者给我指出一些可能与此相关的文档吗？每个人都会看到，我正试图用几种不同的方式来尝试。我放置了屏幕截图，希望有人能够告诉我最干净的方法，以及简单地让它在页面上呈现。我已经放置了截图，请让我知道，如果有任何进一步的信息，我可以提供。谢谢你能提供的帮助 [app.JS文件][1]Charts 海图的PUG绘制,charts,pug,Charts,Pug,我有问题，试图让这个图表呈现在帕格。我想把chartJS代码放在它自己的文件夹中，然后在一个PUG模板中呈现它。你能解释一下我做错了什么，或者给我指出一些可能与此相关的文档吗？每个人都会看到，我正试图用几种不同的方式来尝试。我放置了屏幕截图，希望有人能够告诉我最干净的方法，以及简单地让它在页面上呈现。我已经放置了截图，请让我知道，如果有任何进一步的信息，我可以提供。谢谢你能提供的帮助 [app.JS文件][1] const express = require('express'); const
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path')
const app = express();
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'css')));
app.set('view engine', 'pug')
app.locals.basedir = path.join(__dirname, 'views');
app.get ('/', (req, res) => {
res.render("dashboard", {title: "Home"})
})
app.listen(3000, () => {
console.log('listening to PORT 3000')
})
$( document ).ready(function () {
var ctx = document.getElementById("myChart").getContext('2d');
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
})
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title USRA-NASA-NAMS
link(rel="stylesheet" href="./insight.css")
script(src="https://code.jquery.com/jquery-3.5.0.min.js")
script(src='https://cdn.jsdelivr.net/npm/chart.js@2.8.0')
script(type="text/javascript" src='pieChart.js')
<!DOCTYPE html>
<html>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer");
chart.options.axisY = { prefix: "$", suffix: "K" };
chart.options.title = { text: "Fruits sold in First & Second Quarter" };
var series1 = { //dataSeries - first quarter
type: "column",
name: "First Quarter",
showInLegend: true
};
var series2 = { //dataSeries - second quarter
type: "column",
name: "Second Quarter",
showInLegend: true
};
chart.options.data = [];
chart.options.data.push(series1);
chart.options.data.push(series2);
series1.dataPoints = [
{ label: "banana", y: 58 },
{ label: "orange", y: 69 },
{ label: "apple", y: 80 },
{ label: "mango", y: 74 },
{ label: "grape", y: 64 }
];
series2.dataPoints = [
{ label: "banana", y: 63 },
{ label: "orange", y: 73 },
{ label: "apple", y: 88 },
{ label: "mango", y: 77 },
{ label: "grape", y: 60 }
];
chart.render();
}
欢迎来到堆栈溢出。请编辑您的问题，将代码本身包含在问题中。代码截图没有帮助。我把代码放在这里让你看。我把它改了一点，只是想让图表表现出来，但还是看不见。我仍然希望创建一个JS文件，然后在PUG页面中表示该图表，但不确定是否在该设置中以及如何表示该图表。当javascript位于
脚本中时，不应该在其前面加上-
（破折号）。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'
},
}
});
};