如何在Chart.js中绘制日期

How to plot dates in Chart.js

本文关键字:绘制 日期 js Chart      更新时间:2023-09-26

我正试图为我的网站制作一张图表,记录一年的日期(每天的条目),然后将其绘制在图表上。

我试着写一个函数,以的格式列出v=特定范围内的所有日期

"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;
}

问题是genDates中存在类型不匹配。标签数组将作为一个数组进行计算,其中包含一个字符串,这与原始示例不同。要解决此问题,您可以直接返回一个数组,然后从图表定义中删除换行数组。

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;
}

我有productos而不是日期,但你需要将你的"日期"传递给一个变量,在这种情况下,我的变量是productos,然后用foreach获取并推送它的值。