我正在开发Vuejs应用程序,并使用Chart.js绘制停止工作的条形图。下图显示了向其发送数据和显示选项后的空白图表:
到目前为止,我一直在使用我的条形图,没有任何问题。现在它不绘制我的数据。我在浏览器中检查了我的html代码,它确实创建了元素。数据集和标签之间似乎发生了错误... 我还记录了发送到renderChart()方法的参数:
chartData = WeeklyBarChart{"labels":["sábado, 29 sep.","domingo, 30 sep.","lunes, 1 oct.","martes, 2 oct.","miércoles, 3 oct.","jueves, 4 oct.","viernes, 5 oct."],"datasets":[{"label":"Pasos","backgroundColor":"#f87979","data":[5560,17486,8242,4067,18866,4957,16943]}]}
options = WeeklyBarChart{"scales":{"yAxes":[{"ticks":{"beginAtZero":true},"gridLines":{"display":true}}],"xAxes":[{"gridLines":{"display":false},"type":"time","time":{"parser":"dddd, D MMM","displayFormats":{"day":"dddd"},"unit":"day"}}]},"legend":{"display":false},"responsive":true,"maintainAspectRatio":false}
这是解析标签的方法。它接收一个日期数组,并返回另一个带有西班牙语的日子和我想要的格式的数组:
parseDateArrayToDayArray(arr){
let arrayLength = arr.length;
let result = Array();
for (let i = 0; i < arrayLength; i++) {
let oldDate = new Date(arr[i]);
let localLocale = moment(oldDate);
moment.locale('es');
localLocale.locale(false);
result.push(localLocale.format('dddd, D MMM'));
}
return result
}
我希望该条形图根据标签显示我的数据。但是正如我所说,什么也没有显示。我正在使用其他图表,它们都可以正常工作。它们之间唯一改变的是数据和标签格式。