我正在读取文本文件并将文本文件中的数据放入数组中,并将数组作为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>