使用对象.键/对象.值将JSON对象解析为ChartJS

kkbh8khc  于 2022-12-13  发布在  Chart.js
关注(0)|答案(1)|浏览(151)

我尝试将JSON文件中的数据显示到ChartJS,但是,我的JSON结构与我在前面的相关问题中看到的结构不同。检查下面的JSON:

{
    "AAPL": [
        {
            "Q1": -26986,
            "Q2": -168099,
            "Q3": -137101,
            "Q4": -561990
        }
    ]
}

我的代码尝试将键用作标签,将值用作数据:

const xmlhttp4 = new XMLHttpRequest();
const url4 = 'https://api.npoint.io/ee3b3d406810c46c44e0';

xmlhttp4.open('GET', url4, true);
xmlhttp4.send();
xmlhttp4.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        const datapoints = JSON.parse(this.responseText);
        const data1 = datapoints[0]
        const barchart = document.getElementById('insider_positions_barchart').getContext('2d');
        const myBarChartAUD = new Chart(barchart, {
            type: 'bar',
            data: {
                labels: Object.keys(data1),
                datasets: [{
                    label: 'Net Activity',
                    data: Object.values(data1),
                    backgroundColor: [
                        'rgba(0, 255, 255, 0.2)',
                    ],
                    borderColor: [
                        'rgba(0, 255, 255, 1)',
                    ],
                    borderWidth: 3
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                },
                maintainAspectRatio: false,
                scales: {
                    y: {
                        ticks: {
                            color: "white"
                        },
                        grid: {
                            display: false
                        }
                    },
                    x: {
                        ticks: {
                            color: "white"
                        },
                        grid: {
                            display: false
                        }
                    }
                }
            }
        })
    }
}

我不知道为什么这不起作用,我猜这与我调用键和值的方式有关。除非我应该改变JSON结构?

eaf3rand

eaf3rand1#

我不能100%确定您想要/期望的输出是什么,但我不得不说,如果您想显示季度,您必须从这里data1["AAPL"][0];获得值,在这种 * 特定 * 情况下。

下面是一个简短的演示:

第一个
如果这不是所需的输出,请更新您的问题,提供更多详细信息

相关问题