无法看到 chart.js 中的行

Question

我正在尝试制作一个 django 网站，该网站将显示每 1 秒更新一次的图表。我不知道为什么，但除了线条之外，其他所有内容都在更新 a snapshot of the graph with the console log。下面的代码是我在 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>

无法看到 chart.js 中的行

Unable to see the lines in chart.js

django

chart.js