完整的代码，全部复制到html文件里运行
- <!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>
|
发表于 2017-6-25 07:28:54
楼主
没有大大帮忙吗？