Chart.js中的条形图不显示我的数据

时间:2019-01-11 17:05:24

标签: vue.js chart.js chartjs-2.6.0

我正在开发Vuejs应用程序,并使用Chart.js绘制停止工作的条形图。下图显示了向其发送数据和显示选项后的空白图表:

Bar chart not working

到目前为止,我一直在使用我的条形图,没有任何问题。现在它不绘制我的数据。我在浏览器中检查了我的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
      }

我希望该条形图根据标签显示我的数据。但是正如我所说,什么也没有显示。我正在使用其他图表,它们都可以正常工作。它们之间唯一改变的是数据和标签格式。

0 个答案:

没有答案