无法看到chart.js中的线条

Question

我正在尝试制作一个django网站，它将显示每1秒更新一次的图表。我不知道为什么，但除了行，其他一切都得到更新与控制台日志的图形快照。下面的代码是我在HTML页面

中的jquery

{% 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>

这是我的apiview

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'}

有人能帮我指出我的错误吗

Answer 1

您告诉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>