我如何在每个索引 json 数据中循环一些特定的键并将其放入数据集:数据? (chart.js)

How can i loop some specific key in each index json data and put it in dataset: data ? (chart.js)

我只想建立折线图股票价格,并管理json数据并将其用于构建图表。

如果我有一些 json 数据。

[
    {
    "close": 116.59,
    "high": 117.49,
    "low": 116.22,
    "open": 116.57,
    "symbol": "AAPL",
    "volume": 46691331,
    "id": "HISTORICAL_PRICES",
    "key": "AAPL",
    "date": "2020-11-27",
  },
  // { ... }
]

并从 chart.js 代码开始


<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 29, 3, 5, 1, 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: {
            y: {
                stacked: true
            }
        }
    }
});
</script>

**如果我想在每个索引中从 json 数据中循环出一个名为 close(它只是一个价格)的键, 并将其放入以下数据集的数据中**

 datasets: [{
            label: '# of Votes',
            data: [12, 29, 3, 5, 1, 3],

我该怎么做?

您可以遍历 JSON 数组的每个对象并将关闭的 属性 值推送到新的数组变量。

检查这个片段

var arr = [
    {
        "close": 116.59,
        "high": 117.49,
        "low": 116.22,
        "open": 116.57,
        "symbol": "AAPL",
        "volume": 46691331,
        "id": "HISTORICAL_PRICES",
        "key": "AAPL",
        "date": "2020-11-27",
    },
    {
        "close": 114.59,
        "high": 117.49,
        "low": 116.22,
        "open": 116.57,
        "symbol": "AAPL",
        "volume": 46691331,
        "id": "HISTORICAL_PRICES",
        "key": "AAPL",
        "date": "2020-11-27",
    },
    {
        "close": 11.59,
        "high": 117.49,
        "low": 116.22,
        "open": 116.57,
        "symbol": "AAPL",
        "volume": 46691331,
        "id": "HISTORICAL_PRICES",
        "key": "AAPL",
        "date": "2020-11-27",
    }
];

var dataset = [];

arr.forEach((value, key)=>{
    dataset.push(value.close);
});

console.log(dataset);

var arr = [
    {
    "close": 116.59,
    "high": 117.49,
    "low": 116.22,
    "open": 116.57,
    "symbol": "AAPL",
    "volume": 46691331,
    "id": "HISTORICAL_PRICES",
    "key": "AAPL",
    "date": "2020-11-27",
},
    {
    "close": 105.3,
    "high": 117.49,
    "low": 116.22,
    "open": 116.57,
    "symbol": "AAPL",
    "volume": 46691331,
    "id": "HISTORICAL_PRICES",
    "key": "AAPL",
    "date": "2020-11-27",
},
];

var data = arr.filter(item => item?.close).map(item => item.close);

console.log(data);