使用Json更新Chart.js

xiozqbni 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(183)

谢谢你的阅读。我正在尝试更新的甜甜圈图表（从Char.js）。以下是我的html代码的一部分。[Html]

<div class="homemainOne">
            <canvas id="doughnutChart" height="250%"></canvas>
            <div class="homePercentage">
                <span class="homePercentageNum"></span>%
            </div>
            <button class="indexButton" id="">Click ME</button>
            <span class="indexProduced" id="indexProduced"></span>
        </div>

下面是我的js代码的一部分。

const getDataFromSheet = async () => {
    try {
        const res = await axios.get('https://sheetdb.io/api/v1/pr969olea08op')
        return res.data;
    }
    catch (e) {
        console.log('error', e)
    }
}

const produced = document.querySelector('.indexProduced');
const indexButton = document.querySelector('.indexButton');

const getProduced = async () => {
    const PRO = await getDataFromSheet();
    console.log(PRO[0].Val);
    produced.innerText = Number(PRO[0].Val)
}

indexButton.addEventListener('click', getProduced);

var indexData = [Number(document.querySelector('.indexProduced').innerText), 720];
const chart1 = document.getElementById("doughnutChart");
const myChart = new Chart(chart1, {
    type: 'doughnut',
    data: {
        labels: ["발전량", "총 소모량"],
        datasets: [
            {
                label: "Population (millions)",
                backgroundColor: ["rgb(58, 149, 231)", "rgba(58, 149, 231, 0.2"],
                data: indexData
            }
        ]
    },
});

所以我想做的是
1.从API获取数据，每次单击按钮时在html上显示（更新）数据。
1.使用显示的数据，通过'QuerySelect'获取，将其用作图表的数据
从API获取数据是成功的，显示也是成功的。但问题是图表没有更新，显示的是初始值。
我这样做的原因是因为我不知道任何其他的方法。如果有更好的方法从API以上的数据和更新为图表，这将是超级好，如果我能知道。感谢阅读！

chart.js

来源：https://stackoverflow.com/questions/73315292/updating-chart-js-with-json

2条答案

按热度按时间

s4chpxco1#

我其实也不是很清楚这个问题，但是有一次我遇到了一个问题，就是每次用户点击按钮的时候，我都要更新图形数据，所以为了这个，我通常只是从API获取数据，并将其放在我的图形js上，但有时它会显示，有时它不会显示，然后我通过删除图形div修复了该问题，并再次追加它，并重新初始化图形我不知道它是否修复了你的问题，但在我的情况下，它运行完美。我将我的工作的一些样本代码这里是我的HTML代码：

<div id="topModelGraph" class="height-400">
 <canvas id="top-model"></canvas>
</div>

这是我的js代码：

$('div#topModelGraph').empty();
 $('div#topModelGraph').append('<canvas id="top-model"></canvas>');
 var ctx = document.getElementById('top-model');
 var lineChart = new Chart(ctx, config);

赞(0）回复(0）举报 2022-11-06

mbjcgjjk2#

在代码中，您似乎没有调用myChart.update()方法，该方法将在您单击按钮后更新并重新呈现图表。

赞(0）回复(0）举报 2022-11-06