javascript - 如何将来自 Ajax 的数据集成到 chart.js 中

Question

我有以下问题。我想将从 http 响应中获取的数据整合到我的 charts.js 图表中。

我通过 Ajax 从 api 端点接收数据，效果很好。我还有一个用于 chart.js 图表的脚本。但我就是不能将这两个脚本结合起来。

我目前不知道在哪里以及如何放置 Ajax 脚本。我应该将它复制到 charts-custom.js 中吗？我尝试了几种方法，但就是行不通。

我对 javascript 和 ajax 没有什么经验。

如果有人可以查看我的代码并帮助我将 ajax 代码与 chart.js 集成，我将不胜感激

非常感谢和亲切的问候

我需要以下文件:

charts.html --> 所有的 html 代码 charts-custom.js --> 图表的 javascript 函数

var endpoint = '/algorithmicTrading/api/portfolioData/data/'

var chartData = []
var chartLabels = []

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){

        portfolioInstruments = data.portfolioInstruments
        absolutPositionValues = data.absolutPositionValues
        percentagePositionWeights = data.percentagePositionWeights


        setChart()
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})

/*global $, document*/
$(document).ready(function setChart(data) {

    'use strict';

    Chart.defaults.global.defaultFontColor = '#75787c';



    // ------------------------------------------------------- //
    // Bar Chart Custom 1
    // ------------------------------------------------------ //
    var BARCHART1 = $('#barChartCustom1');
    var barChartHome = new Chart(BARCHART1, {
        type: 'bar',
        options:
        {
            scales:
            {
                xAxes: [{
                    display: true,
                    barPercentage: 0.2
                }],
                yAxes: [{
                    ticks: {
                        max: 100,
                        min: 0
                    },
                    display: false
                }],
            },
            legend: {
                display: false
            }
        },
        data: {
            labels: portfolioInstruments,
            datasets: [
                {
                    label: "Data Set 1",
                    backgroundColor: [
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99'
                    ],
                    borderColor: [
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99',
                        '#EF8C99'
                    ],
                    borderWidth: 0.3,
                    data: absolutPositionValues
                }
            ]
        }
    });

Answer 1

'use strict';
var endpoint = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'

function setChart(data){
    var portfolioInstruments = data.members.map(e=>e.name);
    var absolutPositionValues = data.members.map(e=>e.age);
    var percentagePositionWeights = data.percentagePositionWeights;
    Chart.defaults.global.defaultFontColor = '#75787c';
    // ------------------------------------------------------- //
    // Bar Chart Custom 1
    // ------------------------------------------------------ //
    var $chart = $('#barChartCustom1');
    var barChartHome = new Chart($chart[0].getContext("2d"), {
        type: 'bar',
        options: {
            scales: {
                xAxes: [{ display: true, barPercentage: 0.2 }],
                yAxes: [{ ticks: { max: 100, min: 0 }, display: false }],
            },
            legend: { display: false }
        },
        data: {
            labels: portfolioInstruments,
            datasets: [
                {
                    label: "Data Set 1",
                    backgroundColor: [  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99'],
                    borderColor: [  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99',  '#EF8C99'],
                    borderWidth: 0.3,
                    data: absolutPositionValues
                }
            ]
        }
    })
}

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
        setChart(data);
    },
    error: function(error_data){
        console.log("Endpoint GET request error");
        // console.log(error_data)
    }
})

$(document).ready(function () {

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="barChartCustom1"></canvas>