javascript - 如何在 Chart.js 中绘制日期

Question

我正在尝试为我的网站制作一个图表，该图表需要一年的日期(每天的条目)，然后将其绘制在图表上。

我尝试编写一个函数，以

的格式列出该 v=certain 范围内的所有日期

"date1", "date2", "date3", ...

然后将该变量字符串放入 chart.js 系列中

var lineChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }
    ]

当我像上面的代码一样使用它时，它会生成图表。但我需要它是动态的，所以我有生成日期和数据的函数。但是当将这些函数调用到变量 linechartData 中时，图表不起作用。

var lineChartData = {
    labels: [genDates()],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [genData()]
        },

上面的这段代码将不起作用。

如果有人对如何绘制数据有任何建议，请在下方留言。

genData 方法只是生成随机数

 function gendata() {
     var i = 0;
     var data = "";
     while (i < 365) {
         data = data + Math.round(Math.random() * 100) + ", ";
         i = i + 1;
     }
     return data;
 }

生成法

function getDates(startDate, stopDate) {
    var dateArray = new Array();
    var currentDate = startDate;
    while (currentDate <= stopDate) {
        dateArray.push(new Date(currentDate));
        currentDate = currentDate.addDays(1);
    }
    dates = "";
    for (i = 0; i < dateArray.length; i++) {
        date = date + dateArray[i] + ", ";
    }
    return dates;
}

Answer 1

问题是 genDates 的类型不匹配。与原始示例不同，标签数组将评估为其中包含单个字符串的数组。要解决此问题，您可以直接返回一个数组并从图表定义中删除环绕数组。