如何在Chart.js中绘制日期
How to plot dates in 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;
}
性别法
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获取并推送它的值。
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 比较从函数和生成的日期对象
- Json数据包含日期和时间格式
- Javascript日期格式类似于ISO,但本地
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 如何在JavaScript中延长当前日期
- 有没有一个javascript图形绘制库可以进行气球树布局
- 两位数的月份日期验证
- 使用谷歌图表在x轴上绘制日期
- 浮点:以日期/时间作为 x 轴的图形未正确绘制
- 用谷歌图表json数据绘制简单的折线图,日期在x轴上
- Highchart:从 java 传递系列映射时绘制日期时间图表问题
- .js当前时间线:如何仅根据日期绘制线条
- 起始时间序列高位图在特定日期/时间绘制
- 在x轴折线图上绘制错误日期的高位图表(高位股票)
- D3不能在safari中绘制日期轴,解析错误
- 为elasticsearch日期直方图绘制一个空间隔
- 如何动态设置日期范围变量并重新绘制谷歌图表
- 如何在Chart.js中绘制日期
- Highcharts未将日期字符串绘制为类别