[疑问] 萌新求助个 chartjs 做图表的问题?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2710 天前的主题，其中的信息可能已经有所发展或是发生改变。

现有个每天日期作为数据名的 log 是这样的格式,每分钟都会有数据写入
2017.06.15_12:24:55 3046 9
2017.06.15_12:25:25 3017 9
2017.06.15_12:25:55 3003 9
2017.06.15_12:26:26 3039 9
2017.06.15_12:26:56 3078 9
2017.06.15_12:27:26 3343 10
2017.06.15_12:27:56 3272 10
2017.06.15_12:28:26 3260 10
2017.06.15_12:28:57 3406 10
2017.06.15_12:29:27 3744 11
2017.06.15_12:29:57 4031 12
2017.06.15_12:30:27 4201 13
2017.06.15_12:30:57 4222 13
2017.06.15_12:31:28 4036 12
2017.06.15_12:31:58 3893 12
2017.06.15_12:32:28 3823 11
2017.06.15_12:32:58 3806 11
2017.06.15_12:33:28 4843 14
2017.06.15_12:33:59 4782 14
2017.06.15_12:34:29 4517 13
...
...
...

想截取最新的十行里第一列和第二列的数据制作数据在 chartjs 里做图表，请问各位大大怎么操作呢？

2017.06.15

chartjs

图表

数据

1 条回复

Qiss

2017-06-26 16:03:05 +08:00

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdn.bootcss.com/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script type="text/javascript">
var rawData = `2017.06.15_12:24:55 3046 9
2017.06.15_12:25:25 3017 9
2017.06.15_12:25:55 3003 9
2017.06.15_12:26:26 3039 9
2017.06.15_12:26:56 3078 9
2017.06.15_12:27:26 3343 10
2017.06.15_12:27:56 3272 10
2017.06.15_12:28:26 3260 10
2017.06.15_12:28:57 3406 10
2017.06.15_12:29:27 3744 11
2017.06.15_12:29:57 4031 12
2017.06.15_12:30:27 4201 13
2017.06.15_12:30:57 4222 13
2017.06.15_12:31:28 4036 12
2017.06.15_12:31:58 3893 12
2017.06.15_12:32:28 3823 11
2017.06.15_12:32:58 3806 11
2017.06.15_12:33:28 4843 14
2017.06.15_12:33:59 4782 14
2017.06.15_12:34:29 4517 13`;

var labels = [];
var datas = [];
rawData.split("\n").forEach(function(value, key) {
var arr = value.split(' ');
labels.push(arr[0]);
datas.push(arr[1]);
if (key > 10) {
return;
}
});

var config = {
type: 'line',
data: {
labels: labels,
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: datas,
fill: false,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx, config);
</script>
</body>

</html>

在隔壁 loc 收到的答案是这个，但是这位大大没把那个以日期为文件名 log 文件插入，说了个 php 的方法试下来插入数据都是空白的，在就是图表的宽和高发现怎么改这两个数字都无法缩小。。。是什么原因？