chart.js react-chartjs-2和chartjs-plugin-streaming依赖错误

kuuvgm7e  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(240)

我试图复制this example来绘制一个可以处理流数据的折线图。它需要图表。js、react-chartjs-2和chartjs-plugin-streaming。
我试着按照上面提到的顺序安装这些软件包。然而,我遇到了这个。
https://i.stack.imgur.com/Rt2xA.png
任何关于如何克服这一点的建议将不胜感激!

eit6fx6z

eit6fx6z1#

chartjs-plugin-streaming需要图表。js版本3,请参阅其文档的介绍部分中的“兼容性说明”。
所以,一个解决方案是降低你的图表。js版本4.2.1(最新)到3个版本之一。网站chartjs.org的文档仍然存在很多旧版本,只需从页面顶部的下拉列表中选择版本。
react-charts-2还支持chart.js的版本3和版本4。下面是有关如何将react-chart-2chart.js v3一起使用的guide
或者,你可以考虑一下你是否真的需要这个插件。它确实提供了一些便利和一些高级功能。然而,当前用于更新图表see the docs的选项非常强大,并且与当前用于通过网络获取数据的工具(如fetchaxios)相结合,您将能够做同样的事情,并享受使用所有工具的更新版本。
例如,以下是一个非常基本的更新序列,仅基于chart.js v4 update功能:

const NData = 200,
    nUpdate = 3, dt = 100,
    dataGenerator = (from, to) => Array.from({length: to-from+1}, (_, i)=>Math.sin((i+from)*2*Math.PI/NData*4)*(1+Math.random()));

const myChart = new Chart(document.getElementById("myChart"), {
    type: 'line',
    data: {
        labels: Array.from({length: NData+1}, (_,i)=>'@'+(i/NData*100).toFixed(0)+'%'),
        datasets: [{
            label:'sin*(1+noise)',
            pointStyle: 'circle',
            lineTension: 0.2,
            borderColor: '#479',
            pointRadius: 0,
            data: dataGenerator(0, NData-1)
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales:{
            x:{
                ticks: {
                    maxTicksLimit: 10.1
                }
            },
            y:{
                min: -2,
                max: 2
            }
        },
        //animation:{duration:0},
    }
});

let current = NData-1;

let ih = setInterval(updateChart, dt);
const button = document.querySelector('#pause');
button.onclick = function(){
    if(ih){
        clearInterval(ih);
        ih = 0;
        button.innerText = 'Continue';
    }
    else{
        ih = setInterval(updateChart, 100);
        button.innerText = 'Pause';
    }
}

function updateChart() {
    myChart.data.datasets[0].data.splice(0, nUpdate);
    myChart.data.datasets[0].data.push(...dataGenerator(current+1, current+nUpdate));
    current+=nUpdate;
    myChart.update('none');
}
<div style="height:300px; width:95vw; display: inline-block; border: 1px solid gray">
<canvas id="myChart"></canvas>
</div>
<button id="pause">Pause</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js" integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body>

相关问题