使用文件

时间:2017-10-05 19:23:07

标签: javascript chart.js

我正在读取文本文件并将文本文件中的数据放入数组中,并将数组作为Chart.js数据集字段中的数据传递,但不会绘制数据。我曾尝试使用更新功能,但我没有赢。当我将它们记录到控制台时,将填充数组。

这是我的JS和HTML:

/// <reference path="../scripts/angular.js" />
/// <reference path="angular-chart.min.js" />
/// <reference path="Chart.min.js" />

var app;

//Start of File Reader
var currentArray = new Array();
var voltageArray = new Array();

document.getElementById('inputFile').onchange = function () {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function (progressEvent) {
        var lines = this.result.split('\n');

        for (var line = 4; line < lines.length - 2; line++) {
            var pair = lines[line].split('\t');
            if (!pair[0].includes(".") || !pair[1].includes(".")) {
                voltageArray.push(parseFloat(pair[0].replace(' ', '.')));
                currentArray.push(parseFloat(pair[1].replace(' ', '.')));
            }
            else {
                voltageArray.push(parseFloat(pair[0]));
                currentArray.push(parseFloat(pair[1]));
            }
        }
    };
    reader.readAsText(file);
};

//End of File Reader
console.log(voltageArray);
console.log(currentArray);
//Module  
(function () {
    app = angular.module("app", ['chart.js']);
})();

app.controller("lineCtrl_Voltage", function ($scope) {

    let lineV = new Chart(document.getElementById("voltage"), {
        type: 'line',
        data: {
            labels: [0.00018,
                    0.00036,
                    0.00054,
                    0.00072,
                    0.0009,
                    0.00108,
                    0.00126,
                    0.00144,
                    0.00162,
                    0.0018,
                    0.00198,
                    0.00216,
                    0.00234,
                    0.00252,
                    0.0027,
                    0.00288,
                    0.00306,
                    0.00324,
                    0.00342,
                    0.0036,
                    0.00378,
                    0.00396,
                    0.00414,
                    0.00432,
                    0.0045,
                    0.00468,
                    0.00486,
                    0.00504,
                    0.00522,
                    0.0054,
                    0.00558,
                    0.00576,
                    0.00594,
                    0.00612,
                    0.0063,
                    0.00648,
                    0.00666,
                    0.00684,
                    0.00702,
                    0.0072,
                    0.00738,
                    0.00756,
                    0.00774,
                    0.00792,
                    0.0081,
                    0.00828,
                    0.00846,
                    0.00864,
                    0.00882,
                    0.009,
                    0.00918,
                    0.00936],
            datasets: [{
                data: [0, 0, 0, 0],
                label: "Voltage",
                borderColor: "#8e5ea2",
                fill: false
            }]
        },
        options: {
            title: {
                display: true,
                text: ''
            },
            scales: {
                yAxes: [{
                    display: true,
                     ticks: {
                            suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                        },
                    scaleLabel: {
                        display: true,
                        labelString: 'Voltage (V)'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Time (ms)'
                    }
                }],
            }
        }
    });

    lineV.update();
});

app.controller("lineCtrl_Current", function ($scope) {

    new Chart(document.getElementById("current"), {
        type: 'line',
        data: {
            labels:
                [0.00018,
                0.00036,
                0.00054,
                0.00072,
                0.0009,
                0.00108,
                0.00126,
                0.00144,
                0.00162,
                0.0018,
                0.00198,
                0.00216,
                0.00234,
                0.00252,
                0.0027,
                0.00288,
                0.00306,
                0.00324,
                0.00342,
                0.0036,
                0.00378,
                0.00396,
                0.00414,
                0.00432,
                0.0045,
                0.00468,
                0.00486,
                0.00504,
                0.00522,
                0.0054,
                0.00558,
                0.00576,
                0.00594,
                0.00612,
                0.0063,
                0.00648,
                0.00666,
                0.00684,
                0.00702,
                0.0072,
                0.00738,
                0.00756,
                0.00774,
                0.00792,
                0.0081,
                0.00828,
                0.00846,
                0.00864,
                0.00882,
                0.009,
                0.00918,
                0.00936],
            datasets: [{
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
                label: "Current",
                borderColor: "#3e95cd",
                fill: false
            }]
        },
        options: {
            title: {
                display: true,
                text: ''
            },
            scales: {
                yAxes: [{
                    display: true,
                    ticks: {
                        suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Current (A)',                     
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Time (ms)'
                    }
                }],
            }
        }
    });
});

function addData(chart, data) {
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}
 <div class="row" ng-app="app">
        <div class="col-md-1"></div>
        <div class="col-md-5">
            <div class="x_panel">
                <div class="x_title">
                    <h2 style="text-align: -webkit-center;">Voltage vs Time </h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div ng-controller="lineCtrl_Voltage">
                        <canvas id="voltage"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="x_panel">
                <div class="x_title">
                    <h2 style="text-align: -webkit-center;">Current vs Time</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div ng-controller="lineCtrl_Current">
                        <canvas id="current"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>

0 个答案:

没有答案