Как интегрировать данные из Ajax в chart.js
У меня следующая проблема. Я хотел бы интегрировать данные, которые я получаю из ответа 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.info("error")
console.info(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
}
]
}
});
спасибо, я переименовал функцию, но, к сожалению, она все еще не работает. Допустимо ли вставлять скрипт ajax над функцией chart.js?
Таким образом, в javascript вы можете объявить такую функцию, как function setChart(data){}, и она вытянет ее на вершину текущего function(){}, который находится внутри. Итак, чтобы ответить на ваш вопрос, да, если функция setChart находится вне $(document).ready(function(){})
Теперь есть исключение, если вы укажете свою функцию как var setChart = function(data){};, тогда переменная setChart будет undefined, пока не достигнет строки, где она указана.
invoice_status_data ... также jquery 3+ использует .done и .fail вместо "успех" и "ошибка
Большое спасибо за вашу помощь, но я до сих пор не знаю, как это исправить. Я изменил исходное сообщение на текущее состояние charts-custom.js. Не могли бы вы, пожалуйста, дайте мне знать, что нужно изменить, чтобы это работало
Я опубликовал незаконченное решение, главным образом потому, что я не могу протестировать вашу конечную точку, но я рассказал вам, как мне начать.
конечную точку можно найти здесь 165.227.152.128/algorithmicTrading/api/portfolioData/data что я мог бы сделать для вас, если бы вы запустили это?
Я отредактировал опубликованный мной код, используя общедоступный MDN HTTPS API. Я не могу вызвать конечную точку HTTP с HTTPS (и вы тоже!). примечание: ваша диаграмма должна быть canvas note2: $chart[0] получает элемент DOM вместо объекта jquery, чтобы вы могли вызвать getContext --- который доступен для элементов canvas.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info("Endpoint GET request error");
// console.info(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>
Кажется, вы действительно близки, вам следует реализовать setChart (data), где он берет ваш ответ ajax и переводит его в формат, понятный charts.js. --- чтобы использовать этот пример с charts.js, реализуйте его в новой функции с именем setChart.