[英]Chart.js line graph data not displaying
I'm trying to make a line graph using Chart.js in an ASP.net project, but none of the data will show up: https://i.stack.imgur.com/vFcjT.png Here is my code:我正在尝试在 ASP.net 项目中使用 Chart.js 制作折线图,但不会显示任何数据: https://i.stack.imTgur.com/v
<script src="~/Scripts/Chart.js"></script>
<div>
<canvas id="CO2Chart" width="800" height="450"></canvas>
</div>
<script>
var CO2data = {
labels: [1959, 1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019],
datasets: {
data: [315.97, 316.91, 317.64, 318.45, 318.99, 319.62, 320.04, 321.38, 322.16, 323.04, 324.62, 325.68, 326.32, 327.45, 329.68, 330.18, 331.11, 332.04, 333.83, 335.4, 336.84, 338.75, 340.11, 341.45, 343.05, 344.65, 346.12, 347.42, 349.19, 351.57, 353.12, 354.39, 355.61, 356.45, 357.1, 358.83, 360.82, 362.61, 363.73, 366.7, 368.38, 369.55, 371.14, 373.28, 375.8, 377.52, 379.8, 381.9, 383.79, 385.6, 387.43, 389.9, 391.65, 393.85, 396.52, 398.65, 400.83, 404.24, 406.55, 408.52, 411.44],
label: "CO2 Atmospheric Concentration",
fill: true,
lineTension: 0.8,
borderColor: "#000000",
backgroundColor: "#000000",
borderWidth: 5
}
}
var CO2options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 300,
max: 475,
stepsize: 5
}
}]
}
}
var ctx = document.getElementById('CO2Chart').getContext('2d');
var CO2Chart = new Chart(ctx, {
type: "line",
data: CO2data,
options: CO2options
}
);
The problem is that inside CO2data
, you didn't define datasets
as an array
.问题是在
CO2data
内部,您没有将datasets
定义为array
。 It should look as follows:它应该如下所示:
var CO2data = {
labels: [...],
datasets: [{
...
}]
};
For further details, consult Dataset Configuration from Chart.js documentation.
有关更多详细信息,请参阅 Chart.js 文档中的数据集配置。
Please have a look at your amended code below.请在下面查看您修改后的代码。
var CO2data = { labels: [1959, 1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019], datasets: [{ data: [315.97, 316.91, 317.64, 318.45, 318.99, 319.62, 320.04, 321.38, 322.16, 323.04, 324.62, 325.68, 326.32, 327.45, 329.68, 330.18, 331.11, 332.04, 333.83, 335.4, 336.84, 338.75, 340.11, 341.45, 343.05, 344.65, 346.12, 347.42, 349.19, 351.57, 353.12, 354.39, 355.61, 356.45, 357.1, 358.83, 360.82, 362.61, 363.73, 366.7, 368.38, 369.55, 371.14, 373.28, 375.8, 377.52, 379.8, 381.9, 383.79, 385.6, 387.43, 389.9, 391.65, 393.85, 396.52, 398.65, 400.83, 404.24, 406.55, 408.52, 411.44], label: "CO2 Atmospheric Concentration", fill: true, lineTension: 0.8, borderColor: "#000000", backgroundColor: "#000000", borderWidth: 5 }] }; var CO2options = { scales: { yAxes: [{ ticks: { beginAtZero: true, min: 300, max: 475, stepsize: 5 } }] } }; var ctx = document.getElementById('CO2Chart').getContext('2d'); var CO2Chart = new Chart(ctx, { type: "line", data: CO2data, options: CO2options });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <div> <canvas id="CO2Chart" width="800" height="450"></canvas> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.