V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Qiss
V2EX  ›  问与答

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

  •  
  •   Qiss · 2017-06-26 15:59:34 +08:00 · 1999 次点击
    这是一个创建于 2467 天前的主题,其中的信息可能已经有所发展或是发生改变。
    现有个每天日期作为数据名的 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 里做图表,请问各位大大怎么操作呢?
    Qiss
        1
    Qiss  
    OP
       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 的方法试下来插入数据都是空白的,在就是图表的宽和高发现怎么改这两个数字都无法缩小。。。是什么原因?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3477 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:54 · PVG 18:54 · LAX 03:54 · JFK 06:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.