如何在Chart.js中绘制日期

时间:2015-06-22 19:23:48

标签: javascript html chart.js

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

我尝试编写一个函数,以

的格式列出该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;
 }

gendate方法

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

MethodInfo

我有产品而不是日期,但你需要通过你的&#34;日期&#34;到一个变量,在这种情况下我的变量是我的sproductos,然后用foreach你接受并推送它的值。