javascript - Chartjs 未显示所有数据点

标签 javascript html chart.js

我有一个包含 3 个点的数据集,但图表上只显示了两个点 Graph

创建该图的代码是

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    datasets: [{
        label: 'Submission',
        data: [{
            t: new Date("April 1, 2018"),
            y: 2
        }, {
            t: new Date("April 10, 2018"),
            y: 1
        }, {
            t: new Date("April 27, 2018"),
            y: 1
        }],
        backgroundColor: ["rgba(90, 150, 200, 0.6)"]
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

显然有三个数据点,但图表上似乎只显示了 2 个。如何解决这个问题?

最佳答案

我通过为每个数据点添加标签来解决这个问题。 enter image description here

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["April 1, 2018", "April 10, 2018", "April 27, 2018", ],
        datasets: [{
            label: 'Submission',
            data: [{
                t: new Date("April 1, 2018"),
                y: 2
            }, {
                t: new Date("April 10, 2018"),
                y: 1
            }, {
                t: new Date("April 27, 2018"),
                y: 1
            }, {
                t: new Date(),
                y: 0
            }],
            backgroundColor: ["rgba(90, 150, 200, 0.6)"]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

关于javascript - Chartjs 未显示所有数据点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50078236/

相关文章:

javascript - 如何制作圆环图部分、按钮

javascript - ChartJs 不会出现在同一页面的 DIV 中

javascript - 检查 primefaces 中的数据表是否为空

javascript - Gulp TypeError : dest. on is not a function

html - IE10 在链接图像上添加边框,忽略为所有其他浏览器修复此问题的 CSS

javascript - Web sql 中的嵌套选择查询

javascript - Chart.js - 响应能力无法正确处理设备方向更改

javascript - 替换服务器子进程的文件路径中的空格

javascript - 在 Chrome Dev 中的函数调用上设置断点。模式

Javascript 加载两个值的单输入字段