使用条形图的javascript数据可视化_Javascript_Data Visualization_Javascript Objects

使用条形图的javascript数据可视化

javascript

使用条形图的javascript数据可视化,javascript,data-visualization,javascript-objects,Javascript,Data Visualization,Javascript Objects,我正在尝试使用javascript来构建条形图来实现数据可视化。我在尝试渲染图形时遇到问题。我在控制台中不断收到消息“TypeError:rates is not iterable”，它引用了渲染函数中的for循环。你知道怎么解决这个问题吗谢谢这是我的密码： console.log('running js for currency rates'); doFetch() function doFetch(){ fetch('https://api.exchangeratesapi

我正在尝试使用javascript来构建条形图来实现数据可视化。我在尝试渲染图形时遇到问题。我在控制台中不断收到消息“TypeError:rates is not iterable”，它引用了渲染函数中的for循环。你知道怎么解决这个问题吗

谢谢

这是我的密码：

console.log('running js for currency rates');

doFetch()


function doFetch(){
    fetch('https://api.exchangeratesapi.io/latest')
    .then(response => response.json())
    .then(data => {
        console.log('Got the data!');
        console.log(data);
        let rates = data.rates;
        let base = data.base;
        let date = data.date;
        console.log(rates);

        render(rates)
    });
}


function render(rates){
    const currencyName = Object.keys(rates);
    const values = Object.values(rates);
    let chart = document.querySelector('.BarContainer');
    chart.innerHTML = "";

    for(let rate of rates){
        let bar = document.createElement('div');
        let baseHeight = 100;
        bar.classList.add('Bar');
        bar.style.height = baseHeight + 'px';
        bar.textContent = currencyName;
        chart.appendChild(bar);
    }

}

for/of

起作用，对象不可编辑。您可能正在为查找





因为费率是文本对象。而
的

适用于Javascript数组。我认为您需要在中使用


这是应该做的
<!doctype html>
<html>
<body>
    <div class="BarContainer"></div>
</body>
<script type='text/javascript'>

console.log('running js for currency rates');

doFetch()


function doFetch(){
    fetch('https://api.exchangeratesapi.io/latest')
    .then(response => response.json())
    .then(data => {
        console.log('Got the data!');
        console.log(data);
        let rates = data.rates;
        let base = data.base;
        let date = data.date;
        console.log(rates);

        render(rates)
    });
}


function render(rates){
    const currencyName = Object.keys(rates);
    const values = Object.values(rates);
    let chart = document.querySelector('.BarContainer');
    chart.innerHTML = "";

    for(let rate in rates){
        let bar = document.createElement('div');
        let baseHeight = 100;
        bar.classList.add('Bar');
        bar.style.height = baseHeight + 'px';
        bar.textContent = currencyName;
        chart.appendChild(bar);
    }

}

</script>
<html>


log（'running js for currency rates'）；
doFetch（）
函数doFetch（）{
取（'https://api.exchangeratesapi.io/latest')
.then（response=>response.json（））
。然后（数据=>{
log（'Got the data！'）；
控制台日志（数据）；
let rates=data.rates；
设base=data.base；
让日期=data.date；
控制台日志（费率）；
渲染（费率）
});
}
函数渲染（速率）{
const currencyName=对象。键（速率）；
常量值=对象值（速率）；
让chart=document.querySelector（'.BarContainer'）；
chart.innerHTML=“”；
对于（出租率，以费率表示）{
设bar=document.createElement（'div'）；
基准高度=100；
bar.classList.add（'bar'）；
bar.style.height=基准高度+px；
bar.textContent=currencyName；
图表.附件（条形图）；
}
}