Javascript Chart.js中不同数量的标签和数据

我正在尝试生成一个可能没有相同数量的数据和标签的图表

例如，我每个月都有一个标签，但可能对于3月或8月，我没有一个值

我尝试了以下代码：

var选项={
类型：'bar'，
数据：{
标签：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]，
数据集：[{
标签：“测试”，
背景颜色：“红色”，
数据：[{
“x”：“Apr”，
y:40
}, {
“x”：“七月”，
y:70
}, {
“x”：“Dec”，
y:120
}]
}]
},
选项：{
回答：是的，
图例：{
位置：'顶部'，
},
标题：{
显示：对，
文本：“我的测试”
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
}
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
新图表（ctx，选项）；

但它在图像中的错误位置显示值

---

如何修复此问题？

如果您没有任何月份的值，请提供0作为该月份的数据

var options = {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                datasets:[
                    {
                        label: 'Test',
                        backgroundColor: 'red',
                        data: [0,0,0,40,0,0,70,0,0,0,0,120]
                    }
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'My Test'
                },
                scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
            }
        }
var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, options);

---

Chart.js支持Moment.js接受的所有格式（“MMM-yyy”）。 仅仅增加年份就可以了

但它在图像中的错误位置显示值

这是因为您提供的数据的

索引

对应于标签的前3个值

解决方案#1:

要解决这个问题，您可以通过为数据中缺少的点提供占位符值，使标签的长度与数据集的长度相等

如果不希望Chartjs以这种方式显示图表数据，请不要将零用作数据集中不存在的值的占位符。[请参阅指示零值的短灰色区域。]

因此，更好的处理方法是提供

null

值。请参见下面的工作示例

const标签=['Jan'，'Feb'，'Mar'，'Apr'，'May'，'June'，'July'，'Aug'，'Sept'，'Oct'，'Nov'，'Dec']；
const data=[{'x'：'Apr'，'y'：40}，{'x'：'July'，'y'：70}，{'x'：'Dec'，'y'：120}]；
const filledMonths=data.map（（月）=>month.x）；
常量数据集=labels.map（月份=>{
const indexOfFilledData=filledMonths.indexOf（月）；
if（indexofficelleddata！=-1）返回数据[indexofficelleddata].y；
返回null；
});
console.log（数据集）