Question

我知道这里已经有人问过这个问题了，但是一直在使用的解决方案对我不起作用。

我的图表根据前端（HTML 日期输入小部件）上提供的开始/结束日期实时呈现。由于该小部件的默认开始时间是 01/01/2019，charts.js 将为 01/01/2019 开始/结束时间创建图表，然后继续为指定的开始/结束日期生成图表。 01/01/2019 图表在悬停时显示，我想摆脱它。

function dayChart(labels_day, data_day) {
    var ctx_day = document.getElementById('day-chart').getContext('2d');      
    var config = {
        type: 'bar',
        data: {
            labels: labels_day,
            // labels: ['Early Morning (00:00-05:59)', 'Morning (06:00-11:59)', 'Afternoon (12:00-18:59)', 'Night (19:00-23:59)'],
            datasets: [{
                label: '# of Orders by Day of the Week',
                data: data_day,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 99, 132, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: 'Taxi Orders calculated by day of the week'
            },
            scales: {
                yAxes: [{
                    id: data_day,
                    display: true,
                    ticks: {
                        stepsize: 500,
                        min: 0,
                    }
                }]
            },
        }
    }
    var chart_day = new Chart (ctx_day, config)
    if (chart_day) {
        chart_day.destroy();
        chart_day = new Chart (ctx_day, config);
        chart_day.update();
    } 
}

html 文件的表单部分

<form name="date-input" method="POST" action="/date-input/">
        <label for="start">Start date:</label>
        <input type="date" id="start" name="start_date" value="2019-01-01" min="2019-01-01" max="2019-06-30">

        <label for="end">End date:</label>
        <input type="date" id="end" name="end_date" value="2019-01-01" min="2019-01-01" max="2019-07-01">
    </form>

开始/结束日期的异步调用

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>

    // global variables - so that chartjs doesn't show old data on hover
    var chart_day;
    var chart_hour;
    var chart_payment;

    var start_date = Date.parse($("#start").val()) / 1000; // const can't be re-assigned or redeclared. Date() to convert datetime into epoch time
    var end_date = Date.parse($("#end").val()) / 1000;  // divide by 1000 to get 10 digits (compatible with values in DB)

    function ajaxRequest() {
        var start_date = Date.parse($("#start").val()) / 1000;
        var end_date = Date.parse($("#end").val()) / 1000;

        console.log(start_date)
        console.log(end_date)

        $.ajax({                       // initialize an AJAX request
            type: "POST",
            url: '/get-data/', // calls data from /date-input/ endpoint
            data: {
                'start_date': start_date,       // add the order id to the POST parameters
                'end_date': end_date,
                'csrfmiddlewaretoken': "{{csrf_token}}",
            },
            success: function (data) {   // `data` is from `homepage` view function
                labels_payment = data.labels_payment
                data_payment = data.data_payment

                labels_hour = data.labels_hour
                data_hour = data.data_hour

                labels_day = data.labels_day
                data_day = data.data_day

                // call payment, hour, and dow methods to render in the frontend
                setPaymentMethodChart(labels_payment, data_payment)
                hourlyChart(labels_hour, data_hour)
                dayChart(labels_day, data_day)

                // console.log(data)
                console.log(data.start_date)
                console.log(data.end_date)
                console.log(data.labels_payment)
                console.log(data.data_payment)

            },
            error: function (data, xhr, status, error) {
                console.log("yikes")
            }
        });
    }

Answer 1

您在全局范围内正确定义了 chart_day，甚至将其注释如下：

<块引用>

全局变量 - 这样 chartjs 就不会在悬停时显示旧数据

然而，问题在于您的 dayChart 函数。您没有使用全局定义的 chart_day 变量，而是在函数的局部范围内定义了一个同名变量。

解决方案是替换以下代码块：

var chart_day = new Chart (ctx_day, config)
if (chart_day) {
    chart_day.destroy();
    chart_day = new Chart (ctx_day, config);
    chart_day.update();
}

...有了这个：

if (chart_day) {
    chart_day.destroy();
}
chart_day = new Chart (ctx_day, config);

charts.js 图表显示悬停时的旧数据

1 个答案: