Невозможно увидеть линии в файле chart.js
Я пытаюсь сделать сайт на django, который будет отображать график, обновляемый каждые 1 секунду. Я не знаю почему, но кроме линий все остальное обновляется снимок графика с консольным журналом . код ниже - это мой jquery в html странице
{% block jquery %}
<script>
var updateInterval = 20 //in ms
var numberElements = 5
var values = []
//Globals
var updateCount = 0
var endpoint = '/api/chart/data'
var ctx = document.getElementById('myChart');
var gchart = new Chart(ctx, {
type: 'line',
data: {
label: [],
datasets: [{
label: 'Wholesale 24 K',
data: [],
fill: true,
borderColor: 'rgb(245, 0, 0)',
tension: 0.1,
parsing: {
yAxisKey: 'b1'
}
}, {
label: 'Retail 24 K',
data: [],
fill: true,
borderColor: 'rgb(245, 225, 0)',
tension: 0.1,
parsing: {
yAxisKey: 's24K'
}
}]
}, options: {
interaction: {
mode: 'index',
}
},
})
function addData(chart, label, data) {
console.log(data)
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
if (updateCount > numberElements) {
gchart.data.labels.shift();
gchart.data.datasets[0].data.shift();
gchart.data.datasets[1].data.shift();
}
else updateCount++;
chart.update();
}
setInterval(ajaxcal, 1000)
function ajaxcal() {
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {
var lal = data.time
addData(gchart, lal, data)
},
error: function (error_data) {
console.log(error_data)
console.log("Failed to fetch chart data from " + endpoint + "!")
},
})
}
</script>и это мой апивью
class ChartData(APIView):
authentication_classes = []
permission_classes = []
def get(self, request, format=None):
g_dic = GetGoldRates()
now = datetime.datetime.now()
current_time = now.strftime("%H:%M:%S")
tg = {
'time': current_time,
'b1': float(g_dic['karat24']),
's24K': float(g_dic['fixkarat24']),
}
return Response(tg)
g_dic обычно получает такой dic {'api_rate': '1796.03', 'karat24': '17.501', 'karat22': '16.031', 'karat21': '15.313', 'karat18': '13.126', 'fixkarat24': '17.950', 'fixkarat22': '17.050', 'fixkarat21': '16.300', 'fixkarat18': '14.000'}
Может кто-нибудь помочь и указать на мою ошибку
Вы указываете chart.js, какой пользовательский ключ ему нужно искать для оси y, но не для оси x. Таким образом, chart.js ищет ключ x в объекте.
Изменение конфигурации parsing с включением xAxisKey: 'time' исправит вашу проблему.
<script>
var updateInterval = 20 //in ms
var numberElements = 5
var values = []
//Globals
var updateCount = 0
var endpoint = '/api/chart/data'
var ctx = document.getElementById('myChart');
var gchart = new Chart(ctx, {
type: 'line',
data: {
label: [],
datasets: [{
label: 'Wholesale 24 K',
data: [],
fill: true,
borderColor: 'rgb(245, 0, 0)',
tension: 0.1,
parsing: {
yAxisKey: 'b1',
xAxisKey: 'time'
}
}, {
label: 'Retail 24 K',
data: [],
fill: true,
borderColor: 'rgb(245, 225, 0)',
tension: 0.1,
parsing: {
yAxisKey: 's24K',
xAxisKey: 'time'
}
}]
}, options: {
interaction: {
mode: 'index',
}
},
})
function addData(chart, label, data) {
console.log(data)
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
if (updateCount > numberElements) {
gchart.data.labels.shift();
gchart.data.datasets[0].data.shift();
gchart.data.datasets[1].data.shift();
}
else updateCount++;
chart.update();
}
setInterval(ajaxcal, 1000)
function ajaxcal() {
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {
var lal = data.time
addData(gchart, lal, data)
},
error: function (error_data) {
console.log(error_data)
console.log("Failed to fetch chart data from " + endpoint + "!")
},
})
}
</script>