转储chartjs数据中缺少的日期
dump missing date in data for chartjs
假设我将使用ChartJS中的折线图,并且我有"日期值"数据。示例:
5 : 05-11-2014
10 : 04-11-2014
55 : 01-11-2014
图表将包含3点。
有什么解决方案和配置可以让我添加自动添加(转储)缺少的日期值=0,因此示例的数据为:
5 : 05-11-2014
10 : 04-11-2014
0 : 03-11-2014
0 : 02-11-2014
55 : 01-11-2014
当然,图表将包含5点。
我只需要一些逻辑来处理这类问题,例如,在全年处理几点时。
这可以在实际图形之外完成,方法是预先解析标签以检查它们的日期是否连续。在下面的例子中,我使用了momentjs,因为它使日期操作、格式化和解析变得更加容易。
那么这只是一种情况,当找到一个后面没有特定日期的日期时,将其添加到标签和图形数据中。
var graphData = [55, 10, 5],
labels = ["01-11-2014", "04-11-2014", "05-11-2014"];
for (var i = 0; i < labels.length; i++) {
//make sure we are not checking the last date in the labels array
if (i + 1 < labels.length) {
var date1 = moment(labels[i], "DD-MM-YYYY");
var date2 = moment(labels[i + 1], "DD-MM-YYYY");
//if the current date +1 is not the same as it's next neighbor we have to add in a new one
if (!date1.add(1, "days").isSame(date2)) {
//add the label
labels.splice(i + 1, 0, date1.format("DD-MM-YYYY"));
//add the data
graphData.splice(i + 1, 0, 0);
}
}
}
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels:labels,
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: graphData
}]
};
var myLineChart = new Chart(ctx).Line(data);
console.log(labels);
console.log(graphData);
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.min.js"></script>
<canvas id="chart" width="500px"></canvas>
相关文章:
- 比较从函数和生成的日期对象
- Json数据包含日期和时间格式
- Javascript日期格式类似于ISO,但本地
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 如何在JavaScript中延长当前日期
- 两位数的月份日期验证
- 更改angularjs中的日期-时间格式
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 将日期时间从json转换为可读格式
- NodeJS日期格式不起作用
- jquerydatetimepicker日期和时间应在框默认值中,而无需单击框
- 使用当前日期生成随机id
- primefaces日历可以禁用过去的日期和时间吗
- 提前阅读日期
- 在JavaScript中拆分日期字符串的更好方法是什么
- 如何在Chartjs中制作整数比例
- 查找最短和最长日期
- 将日期和时间转换为UTC格式的日期-Javascript
- 转储chartjs数据中缺少的日期
- 当在时间轴上显示标签时,ChartJS显示日期,但不显示时间