我尝试用Chart.js(一个我还是新手的JavaScript库)制作一个静态图。
这是我的代码:
const canvas = document.getElementById('StaticPlot');
const ctx = canvas.getContext('2d');
function createStaticChart() {
const labels = ['Data Point 1', 'Data Point 2', 'Data Point 3', 'Data Point 4', 'Data Point 5'];
const dataPoints = [2, 4, 3, 5, 1];
const staticChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Data',
data: dataPoints,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
}
createStaticChart();
以下是已更正的内容:
// Removed the unnecessary const config block.
// Defined the options object correctly inside the staticChart configuration.
// Removed the data argument from the createStaticChart function as the data and labels are defined within the function itself.
// Defined the labels and dataPoints arrays for the chart data.
//这段更正后的代码应该在指定的canvas元素上用提供的数据创建一个静态折线图。”
我已经阅读了Chart.js文档,并根据ChatGPT的建议做了一些修改(参见。我的代码中的注解部分),代码看起来很好。然而,当我运行我的Web应用程序(用Python Flask实现)时,我的网站上没有显示任何图表。我的代码有什么问题,或者有人对我如何解决这个问题有建议吗?我想了解如何实现这个简单的图表,以便使用Chart.js处理更高级的项目。提前感谢!
1条答案
按热度按时间ldxq2e6h1#
在尝试使用jsfiddle重现问题时,我创建了以下内容:https://jsfiddle.net/6do1y9m8/
未修改JavaScript部分。
为了正常工作,在html代码中,需要确保有一个
canvas
节点,其中id为StaticPlot
。注意:如果你使用的是div而不是canvas,
getContext()
将会失败。