Chart.js로 실시간 스트리밍 데이터 그래프
14317 단어 실시간chart.jsstreamingVisualization
소개
실시간 스트리밍 데이터를 시각화하고 싶고 그래프 라이브러리를 찾고 있다면 상당히 많이 나왔습니다 1
Chart.js
이번은, Chart.js
로 가는 것에. 이유는 이 플러그인가 좋았기 때문에. 사이트 설명도 이해하기 쉽습니다.
우선 이동
copipe로 움직여야합니다.
real-time-chart.html<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
// CHART
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Power',
borderColor: chartColors.red,
fill: false,
data: []
},
{
label: 'Temperature',
borderColor: chartColors.blue,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
},
{
label: 'Humidity',
borderColor: chartColors.yellow,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
}]
},
options: {
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
type: 'realtime',
realtime: {
delay: 2000,
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
}
}
}]
}
}
});
</script>
</body>
</html>
실제 사용법
이번에는 실제 데이터가 이런 느낌이었기 때문에
{psn: 1, time: "1588382630511", name: "sensor1", amp: 4.97, tem: 6.72, hum: 8.22}
forEach
아니고, 다음과 같이 했다. dequeue()
에서 배열에서 위의 JSON 데이터를 onRefresh
때마다 하나 오는 느낌
realtime: {
delay: 3000,
onRefresh: function(chart) {
let sensorData = dequeue(); // {psn: 1, time: "1588382630511", name: "sensor1", amp: 4.97, tem: 6.72, hum: 8.22}
let timeFromSensor = new Date(parseInt(sensorData.time));
// Power
chart.data.datasets[0].data.push({
x: timeFromSensor,
y: sensorData.amp
});
// Temperature
chart.data.datasets[1].data.push({
x: timeFromSensor,
y: sensorData.tem
});
// Humidity
chart.data.datasets[2].data.push({
x: timeFromSensor,
y: sensorData.hum
});
}
}
아직도 있다. 이 요약 좋은 ↩
Reference
이 문제에 관하여(Chart.js로 실시간 스트리밍 데이터 그래프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/narutaro/items/320b35a712bb3f058a75
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
// CHART
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Power',
borderColor: chartColors.red,
fill: false,
data: []
},
{
label: 'Temperature',
borderColor: chartColors.blue,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
},
{
label: 'Humidity',
borderColor: chartColors.yellow,
fill: false,
cubicInterpolationMode: 'monotone',
data: []
}]
},
options: {
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
type: 'realtime',
realtime: {
delay: 2000,
onRefresh: function(chart) {
chart.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
}
}
}]
}
}
});
</script>
</body>
</html>
이번에는 실제 데이터가 이런 느낌이었기 때문에
{psn: 1, time: "1588382630511", name: "sensor1", amp: 4.97, tem: 6.72, hum: 8.22}
forEach
아니고, 다음과 같이 했다. dequeue()
에서 배열에서 위의 JSON 데이터를 onRefresh
때마다 하나 오는 느낌
realtime: {
delay: 3000,
onRefresh: function(chart) {
let sensorData = dequeue(); // {psn: 1, time: "1588382630511", name: "sensor1", amp: 4.97, tem: 6.72, hum: 8.22}
let timeFromSensor = new Date(parseInt(sensorData.time));
// Power
chart.data.datasets[0].data.push({
x: timeFromSensor,
y: sensorData.amp
});
// Temperature
chart.data.datasets[1].data.push({
x: timeFromSensor,
y: sensorData.tem
});
// Humidity
chart.data.datasets[2].data.push({
x: timeFromSensor,
y: sensorData.hum
});
}
}
아직도 있다. 이 요약 좋은 ↩
Reference
이 문제에 관하여(Chart.js로 실시간 스트리밍 데이터 그래프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/narutaro/items/320b35a712bb3f058a75텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)