使用 object.keys/object.values 将 JSON 对象解析为 ChartJS答案

【问题标题】：Parse JSON object to ChartJS using object.keys/object.values使用 object.keys/object.values 将 JSON 对象解析为 ChartJS
【发布时间】：2022-12-20 09:21:25
【问题描述】：

我正在尝试将 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 结构？

【问题讨论】：

标签： javascript json chart.js

【解决方案1】：

我不是 100% 确定你想要什么输出，但我不得不说，如果你想显示季度，你必须从这里获取值data1["AAPL"][0];。

这是一个展示它的简短演示：

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

// extracting only the needed data
let initialData = data1["AAPL"][0];

const data = {
  labels: Object.keys(initialData),
  datasets: [{
      label: 'Dataset 0',
      data: Object.values(initialData),
      backgroundColor: '#B0D3FF',
      barThickness: 20,
    }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: false,
      },
      legend: {
        display: false
      }
    },
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
      intersect: false,
    }
  }
};

console.info(document.getElementById('chart'))

new Chart(
    document.getElementById('chart'),
    config
);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:184px">
<canvas  id="chart" ></canvas>
</div>

如果这不是所需的输出，请更新您的问题，并提供更多说明

【讨论】：

【解决方案2】：

问题是您正在尝试使用数据点 [0] 访问数据点的第一个元素，但数据点是一个对象，而不是数组，因此您无法使用索引访问它的元素。相反，您可以使用 Object.entries() 方法从数据点获取键值对数组，然后访问该数组的第一个元素以获取所需的键值对。

这是您如何做到这一点的示例：

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 [company, data] = Object.entries(datapoints)[0]; // get the first 
 key-value pair from datapoints

    const barchart = 
    document.getElementById('insider_positions_barchart').getContext('2d');
    const myBarChartAUD = new Chart(barchart, {
        type: 'bar',
        data: {
            labels: Object.keys(data),
            datasets: [{
                label: 'Net Activity',
                data: Object.values(data),
                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
                       }
                   }
               }
           }
       });
    }
}

此代码使用 Object.entries() 从数据点获取键值对数组，然后解构该数组以获取第一个键值对并将其值分配给公司和数据变量。然后，它使用 Object.keys() 和 Object.values() 方法从数据中获取键和值，并将它们用作图表的标签和数据。

我希望这有帮助！如果您有任何其他问题，请告诉我。

【讨论】：