如何在Chart.js中绘制日期

Question

I am trying to make a chart for my website that takes a year's worth of dates (entries for each day), and then plots it on the graph.

I tried writing a function that makes a list of all dates in that v=certain range in the format of

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

and then places that variable string into the series of 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()]
        }
    ]

When I have it like code above, it will produce the graph. But I need it to be dynamic, so I have functions that produce the dates and data. But when calling those functions into the variable linechartData, the chart does not work.

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()]
        },

This code directly above will not work.

If any one has any suggestions on how to plot the data, please post below.

The genData method just generates random numbers

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

gendate method

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

The problem is that there's a type mismatch at genDates . The labels array will evaluate as an array with a single string in it unlike in your original example. To work around this you could return an array directly and remove the wrapping array from your chart definition.

Answer 2

var areaChartData = {
labels: labelsnuevos(productos),
   // here goes my dataset
};

function labelsnuevos(productos)
{
    var labels = [];

    $.each(productos, function(key, value) {
        var lab = value.nombre;
        labels.push(lab);
    });
    return labels;
}

I have productos instead of dates, but you need to pass your "dates" to a variable, in this case my variable I sproductos, then with foreach you take and push its value.