Javascript 如何制作以太坊智能合约图表

我这里有一个智能合约和一个我想为这个智能合约地址做一个图表 0xE462CbEE0cd420f6c199B0194B1D8D93Fb5e7720和“总供应量”

我希望交易一进入我们的账户，图表就会更新

如何在chartjs中实现这一点

我这里有html画布

<canvas id="myChart" width="400" height="400"></canvas>

---

我现在如何使用图表的数据totalSupply？

您的数据应该来自哪里？或者这就是你要问的？数据来自智能合约-我不知道如何从智能合约中获取这些数据在我的情况下，从totalSupply中获取的数据进入图表，请先弄清楚。在你得到数据之前，你不能对图表做任何事情，也不能建议非现场资源。谷歌“以太坊API”，有很多，我相信你会找到一个你需要的我已经在我的合同中访问了totalsupply我只是不知道如何将“totalsupply”放入图表中。我更新我的问题，提供一个

supply

数据的示例：

console.log（supply）
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

//and here is the data from my smart contract 
var supply = await contract.methods.totalSupply().call()

// and than i output it in my UI like this
document.getElementById('contractBalanceSnet').innerHTML = supply/100000000