全球主机交流论坛

标题: 萌新求助个chartjs做图表的问题 [打印本页]
作者: Diss    时间: 2017-6-25 07:28
标题: 萌新求助个chartjs做图表的问题
本帖最后由 Diss 于 2017-6-25 21:04 编辑

现有个每天日期作为数据名的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-6-25 07:28
Diss 发表于 2017-6-26 10:03
求大大再指教一下吧，学会了送你个1024邀请码

完整的代码，全部复制到html文件里运行
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.   <meta charset="utf-8">
  6. </head>

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

  33.   var labels = [];
  34.   var datas = [];
  35.   rawData.split("\n").forEach(function(value, key) {
  36.     var arr = value.split(' ');
  37.     labels.push(arr[0]);
  38.     datas.push(arr[1]);
  39.     if (key > 10) {
  40.       return;
  41.     }
  42.   });

  44.   var config = {
  45.     type: 'line',
  46.     data: {
  47.       labels: labels,
  48.       datasets: [{
  49.         label: "My First dataset",
  50.         backgroundColor: 'rgb(255, 99, 132)',
  51.         borderColor: 'rgb(255, 99, 132)',
  52.         data: datas,
  53.         fill: false,
  54.       }]
  55.     },
  56.     options: {
  57.       responsive: true,
  58.       title: {
  59.         display: true,
  60.         text: 'Chart.js Line Chart'
  61.       },
  62.       tooltips: {
  63.         mode: 'index',
  64.         intersect: false,
  65.       },
  66.       hover: {
  67.         mode: 'nearest',
  68.         intersect: true
  69.       },
  70.       scales: {
  71.         xAxes: [{
  72.           display: true,
  73.           scaleLabel: {
  74.             display: true,
  75.             labelString: 'Month'
  76.           }
  77.         }],
  78.         yAxes: [{
  79.           display: true,
  80.           scaleLabel: {
  81.             display: true,
  82.             labelString: 'Value'
  83.           }
  84.         }]
  85.       }
  86.     }
  87.   };
  88.   
  89.   var ctx = document.getElementById("myChart").getContext("2d");
  90.   var myNewChart = new Chart(ctx, config);
  91.   </script>
  92. </body>

  94. </html>
复制代码
作者: Diss    时间: 2017-6-25 10:39
没有大大帮忙吗？
作者: fgpgy    时间: 2017-6-25 12:22
用换行符分割为数组，循环出来
作者: Diss    时间: 2017-6-25 12:53
fgpgy 发表于 2017-6-25 12:22
用换行符分割为数组，循环出来

大大求代码
作者: shshwzs    时间: 2017-6-25 13:03
php么？
作者: Diss    时间: 2017-6-25 13:28
shshwzs 发表于 2017-6-25 13:03
php么？

php python啥都可以只要能搞定
作者: Diss    时间: 2017-6-25 21:04
晚上人多看看，再来顶顶
作者: 南小鸟    时间: 2017-6-25 21:30
直接用js就行了，labels是横坐标数组，datas是具体的数据
  1. var rawData = `2017.06.15_12:24:55 3046 9
  2. 2017.06.15_12:25:25 3017 9
  3. 2017.06.15_12:25:55 3003 9
  4. 2017.06.15_12:26:26 3039 9
  5. 2017.06.15_12:26:56 3078 9
  6. 2017.06.15_12:27:26 3343 10
  7. 2017.06.15_12:27:56 3272 10
  8. 2017.06.15_12:28:26 3260 10
  9. 2017.06.15_12:28:57 3406 10
  10. 2017.06.15_12:29:27 3744 11
  11. 2017.06.15_12:29:57 4031 12
  12. 2017.06.15_12:30:27 4201 13
  13. 2017.06.15_12:30:57 4222 13
  14. 2017.06.15_12:31:28 4036 12
  15. 2017.06.15_12:31:58 3893 12
  16. 2017.06.15_12:32:28 3823 11
  17. 2017.06.15_12:32:58 3806 11
  18. 2017.06.15_12:33:28 4843 14
  19. 2017.06.15_12:33:59 4782 14
  20. 2017.06.15_12:34:29 4517 13`;

  22. var labels = [];
  23. var datas = [];
  24. rawData.split("\n").forEach(function(value, key) {
  25.         var arr = value.split(' ');
  26.         labels.push(arr[0]);
  27.         datas.push(arr[1]);
  28.         if (key > 10) {
  29.                 return;
  30.         }
  31. });
复制代码
作者: Diss    时间: 2017-6-26 09:47
南小鸟 发表于 2017-6-25 21:30
直接用js就行了，labels是横坐标数组，datas是具体的数据

这段代码放到html里是空白啊。。。
作者: 南小鸟    时间: 2017-6-26 09:59
Diss 发表于 2017-6-26 09:47
这段代码放到html里是空白啊。。。

肯定空白的，这里面没有任何chartjs的代码。。。我以为你会写chartjs的代码。。。
作者: Diss    时间: 2017-6-26 10:03
南小鸟 发表于 2017-6-26 09:59
肯定空白的，这里面没有任何chartjs的代码。。。我以为你会写chartjs的代码。。。 ...

求大大再指教一下吧，学会了送你个1024邀请码
作者: Diss    时间: 2017-6-26 11:12
南小鸟 发表于 2017-6-26 10:16
完整的代码，全部复制到html文件里运行

大佬，还有个小问题就是，这个段代码要怎么获取每天日期为标题的log文件呢？
数据是在文件里的，代码里这段不是
作者: 南小鸟    时间: 2017-6-26 12:09
Diss 发表于 2017-6-26 11:12
大佬，还有个小问题就是，这个段代码要怎么获取每天日期为标题的log文件呢？
数据是在文件里的，代码里这 ...

用php的file_get_contents获取下就行了
作者: Diss    时间: 2017-6-26 14:44
南小鸟 发表于 2017-6-26 12:09
用php的file_get_contents获取下就行了

大佬。。。我尝试了还是以失败告终。。。求指导。。。
  1. <?php $rawData = file_get_contents("2017_06_15.txt");?>
复制代码


然后怎么带入js呢？插入方式是？
作者: 南小鸟    时间: 2017-6-26 20:46
Diss 发表于 2017-6-26 14:44
大佬。。。我尝试了还是以失败告终。。。求指导。。。

然后怎么带入js呢？插入方式是？ ...
  1. var rawData = `<?php echo file_get_contents('路径/xxx.txt');?>`;
复制代码
作者: 风铃    时间: 2017-6-26 20:51
南小鸟 发表于 2017-6-26 20:46

大佬还真是有耐心....手把手教学
作者: Diss    时间: 2017-6-26 21:09
本帖最后由 Diss 于 2017-6-26 21:43 编辑

(, 下载次数: 1)
把整个txt里的文件拷贝进去的话是这样的效果，发现数据也不是只有最新的十条，只有时间是最新的十条
南小鸟 发表于 2017-6-26 20:46


就是这样加的但是，表格是有但是数据是空白的 。。。附件里就是数据文件
作者: Diss    时间: 2017-6-26 21:21
风铃 发表于 2017-6-26 20:51
大佬还真是有耐心....手把手教学

一个好大佬带个小白。。。
作者: 南小鸟    时间: 2017-6-27 09:34
Diss 发表于 2017-6-26 21:09
把整个txt里的文件拷贝进去的话是这样的效果，发现数据也不是只有最新的十条，只有时间是最新的十条

十条的问题我写错了，forEach那段代码改成这样就是十条了
  1.   rawData.split("\n").forEach(function(value, key) {
  2.     if (key >= 10) {
  3.       return;
  4.     }
  5.     var arr = value.split(' ');
  6.     labels.push(arr[0]);
  7.     datas.push(arr[1]);
  8.   });
复制代码


然后加上php代码空白的问题是不是因为你的扩展名还是html？应该是php文件。
如果是php文件还是空白的话把右键网页-查看源代码的发上来看看，有可能rawData是空的
作者: Diss    时间: 2017-6-29 08:33
南小鸟 发表于 2017-6-27 09:34
十条的问题我写错了，forEach那段代码改成这样就是十条了

是改成PHP后缀就好了，感谢大佬指教



欢迎光临 全球主机交流论坛 (https://52.ht/) Powered by Discuz! X3.4
zh-CN zh-CN