将JSON数据从JSON服务器上传到chartJS

kwvwclae  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(197)

我尝试从本地JSON服务器导入数据到chartJS,但是没有任何结果。下面是我的JS代码:

jQuery.getJSON("http://localhost:3000/AUDcotdata", function(data) {
    var dataAUDS = data.SHORTDEALERINTERMEDIARY[0].map(function(e) {
        return e
    });
    var dataAUDL = data.LONGDEALERINTERMEDIARY[0].map(function(e) {
        return e
    });

    const AUDlinecharttop = document.getElementById('fxlinecharttopAUD').getContext('2d');
    const AUDlinechart1 = new Chart(AUDlinecharttop, {
        type: 'line',
        data: {
            labels: ['1', '2', '3', '4', '5', '6','7','8','9','10'] ,
            datasets: [{
                label: "Short",
                data: dataAUDS,
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 4,
            },
            { label: "Long" ,
                data: dataAUDL,
                backgroundColor: ['rgba(75, 192, 192, 0.2)'],
                borderColor: ['rgba(75, 192, 192, 1)'],
                borderWidth: 4
            }],
        },
        options: {
            responsive: "true",
            plugins: {
                title: {
                    color: "white",
                    display: true,
                    text: 'Positions (AUD)',
                },
                legend: {
                    display: true,
                    color: "white"
                }
            },
            maintainAspectRatio: false,
            elements: {
                line: {
                    fill: true,
                    tension: 0.2
                }
            },
            scales: {
                y: {
                    ticks: {
                        color: "white"
                    },
                    beginAtZero: true,
                },
                x: {
                    ticks: {
                        color: "white"
                    },
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
})

标签是手动的,它只是需要Y轴的值。所有的HTML和cdn链接都是有效的,因为当我硬编码JSON文件或手动输入数据时(使用不同于getJSON等的方法),它都是有效的。下面是JSON格式:

[
  {
    "LONGDEALERINTERMEDIARY": [
      {
        "0": 57387,
        "1": 71459,
        "2": 63223,
        "3": 66892,
        "4": 74976,
        "5": 74008,
        "6": 62787,
        "7": 59250,
        "8": 58953,
        "9": 42261
      }
    ],
    "SHORTDEALERINTERMEDIARY": [
      {
        "0": 3346,
        "1": 3205,
        "2": 3109,
        "3": 3482,
        "4": 4591,
        "5": 4228,
        "6": 3998,
        "7": 3351,
        "8": 5525,
        "9": 6516
      }
    ],
  }
]

有人能解释一下我的代码有什么问题吗?我是否需要添加或替换任何东西?
先谢谢你

njthzxwz

njthzxwz1#

CHART.JS不支援您提供给数据集的数据。请参阅CHART.JS文件:https://www.chartjs.org/docs/latest/general/data-structures.html#data-structures
在下面的示例中,使用您的代码,添加一个数据规范化并删除labels,因为已经提供了该数据。
第一个

相关问题