Javascript Chart.js线图数据未显示

Javascript Chart.js线图数据未显示,javascript,chart.js,Javascript,Chart.js,我正在尝试在ASP.net项目中使用Chart.js制作一个折线图,但所有数据都不会显示: 这是我的密码: <script src="~/Scripts/Chart.js"></script> <div> <canvas id="CO2Chart" width="800" height="450"></canvas> </div> <script> var CO2data = {

我正在尝试在ASP.net项目中使用Chart.js制作一个折线图,但所有数据都不会显示: 这是我的密码:

<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
    }
    );

var CO2data={
标签:[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],
数据集:{
数据:[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],
标签:“二氧化碳大气浓度”,
填充:是的,
线张力:0.8,
边框颜色:#000000“,
背景颜色:“000000”,
边框宽度:5
}
}
var二氧化碳选项={
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的,
最低:300,,
最高:475,
步长:5
}
}]
}
}
var ctx=document.getElementById('CO2Chart').getContext('2d');
var CO2Chart=新图表(ctx{
键入:“行”,
数据:二氧化碳数据,
选项:二氧化碳选项
}
);

问题在于,在
CO2data
中,您没有将
数据集定义为
数组

var CO2data = {
  labels: [...],
  datasets: [{
    ...
  }]
};
有关更多详细信息,请参阅Chart.js文档

请在下面查看您的修订代码

var CO2data={
标签:[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],
数据集:[{
数据:[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],
标签:“二氧化碳大气浓度”,
填充:是的,
线张力:0.8,
边框颜色:#000000“,
背景颜色:“000000”,
边框宽度:5
}]
};
var二氧化碳选项={
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的,
最低:300,,
最高:475,
步长:5
}
}]
}
};
var ctx=document.getElementById('CO2Chart').getContext('2d');
var CO2Chart=新图表(ctx{
键入:“行”,
数据:二氧化碳数据,
选项:二氧化碳选项
});


您可以在控制台中检查是否发生了错误。或者尝试此操作@Mike L:很高兴我能提供帮助。如果您认为我的回答是您问题的解决方案,请将其标记为已接受(请参阅)。