使用 chart.js、javascript、html 实时流式传输数据

Question

我想以图表的形式流式传输实时数据。 我是 Javascript 的新手，所以我想首先尝试使用此页面上的示例。 https://web.archive.org/web/20211113012042/https://nagix.github.io/chartjs-plugin-streaming/latest/samples/charts/line-horizontal.html

代码如下：

 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)' }; function randomScalingFactor() { return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100); } function onRefresh(chart) { chart.config.data.datasets.forEach(function(dataset) { dataset.data.push({ x: Date.now(), y: randomScalingFactor() }); }); } var color = Chart.helpers.color; var config = { type: 'line', data: { datasets: [{ label: 'Dataset 1 (linear interpolation)', backgroundColor: color(chartColors.red).alpha(0.5).rgbString(), borderColor: chartColors.red, fill: false, lineTension: 0, borderDash: [8, 4], data: [] }, { label: 'Dataset 2 (cubic interpolation)', backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(), borderColor: chartColors.blue, fill: false, cubicInterpolationMode: 'monotone', data: [] }] }, options: { title: { display: true, text: 'Line chart (hotizontal scroll) sample' }, scales: { xAxes: [{ type: 'realtime' }], yAxes: [{ scaleLabel: { display: true, labelString: 'value' } }] }, tooltips: { mode: 'nearest', intersect: false }, hover: { mode: 'nearest', intersect: false }, plugins: { streaming: { duration: 20000, refresh: 1000, delay: 2000, onRefresh: onRefresh } } } }; window.onload = function() { var ctx = document.getElementById('myChart').getContext('2d'); window.myChart = new Chart(ctx, config); }; document.getElementById('randomizeData').addEventListener('click', function() { config.data.datasets.forEach(function(dataset) { dataset.data.forEach(function(dataObj) { dataObj.y = randomScalingFactor(); }); }); window.myChart.update(); }); var colorNames = Object.keys(chartColors); document.getElementById('addDataset').addEventListener('click', function() { var colorName = colorNames[config.data.datasets.length % colorNames.length]; var newColor = chartColors[colorName]; var newDataset = { label: 'Dataset ' + (config.data.datasets.length + 1), backgroundColor: color(newColor).alpha(0.5).rgbString(), borderColor: newColor, fill: false, lineTension: 0, data: [] }; config.data.datasets.push(newDataset); window.myChart.update(); }); document.getElementById('removeDataset').addEventListener('click', function() { config.data.datasets.pop(); window.myChart.update(); }); document.getElementById('addData').addEventListener('click', function() { onRefresh(window.myChart); window.myChart.update(); });

 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.5.0/chartjs-plugin-streaming.min.js"></script> </head> <body> <div> <canvas id="myChart"></canvas> </div> <p> <button id="randomizeData">Randomize Data</button> <button id="addDataset">Add Dataset</button> <button id="removeDataset">Remove Dataset</button> <button id="addData">Add Data</button> </p> </body>

当我将它复制并粘贴到 jsfiddle 中时，第一个代码片段进入 Javascript 部分，第二个进入 HTML 部分。 然而，什么都没有发生？ 有人可以解释为什么/帮助我编辑它以使其有效吗？

注意：上面的代码不是我自己的，它属于这个家伙

Answer 1

在 JSFiddle 中，加载类型默认设置为“加载时”，因此您无法处理加载事件。 将加载类型设置为“不换行 - 底部”有效（在 Javascript 部分的弹出菜单中）。

使用 chart.js、javascript、html 实时流式传输数据

问题描述

1 个解决方案

解决方案1
3 2018-08-01 07:37:41

使用 chart.js、javascript、html 实时流式传输数据

问题描述

1 个解决方案

解决方案1 3 2018-08-01 07:37:41

解决方案1
3 2018-08-01 07:37:41