Question

我有一个奇怪的问题。我从数据库中获取日期。所有可视化都很好。然后，我删除了一条记录，并在同一日期和时间添加了另一条记录。但是该记录在图表的右侧移动，而不是在左侧排序：

js代码是这样的：

    $(document).ready(function(){
    $.ajax({
        url: "js/json/otv_fil_iskar/data.php",
        method: "POST",
        success: function(data) {
            console.log(data);
            var progress = document.getElementById('animationProgress');
            var dateANDtime = [];
            var Gblok9osx = [];
            var Gblok9osy = [];
            var Gblok11osx = [];
            var Gblok11osy = [];
            var Gfilblok10 = [];
            var Gfilblok11 = [];
            var Gcvn = [];
            var Gndk2 = [];

            for(var i in data) {
                dateANDtime.push(data[i].to_char);
                Gblok9osx.push(data[i].blok9osx);
                Gblok9osy.push(data[i].blok9osy);
                Gblok11osx.push(data[i].blok11osx);
                Gblok11osy.push(data[i].blok11osy);
                Gfilblok10.push(data[i].filblok10);
                Gfilblok11.push(data[i].filblok11);
                Gcvn.push(data[i].cvn);
                Gndk2.push(data[i].ndk2);
            }

            var chartdata = {
                labels: dateANDtime,
                datasets : [
                    {fill: false,
                        label: 'Отвес блок 9 x',
                        backgroundColor: 'rgba(199, 228, 238, 0.75)',
                        borderColor: 'rgba(1, 150, 200, 0.75)',
                        //hoverBackgroundColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: Gblok9osx,
                        hidden: true
                    },
                    {fill: false,
                        label: 'Отвес блок 9 y',
                        backgroundColor: 'rgba(163, 147, 222, 0.75)',
                        borderColor: 'rgba(50, 10, 200, 0.75)',
                        //hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: Gblok9osy,
                        hidden: true
                    },
                    {fill: false,
                        label: 'Отвес блок 11 x',
                        backgroundColor: 'rgba(221, 221, 241, 0.75)',
                        borderColor: 'rgba(100, 100, 200, 0.75)',
                        //hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: Gblok11osx,
                        hidden: true
                    },
                    {fill: false,
                        label: 'Отвес блок 11 y',
                        backgroundColor: 'rgba(147, 227, 227, 0.75)',
                        borderColor: 'rgba(1, 200, 200, 0.75)',
                        //hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: Gblok11osy,
                        hidden: true
                    },
                    {fill: false,
                        label: 'Филтрация блок 10',
                        backgroundColor: 'rgba(139, 105, 132, 0.75)',
                        borderColor: 'rgba(255, 1, 200, 0.75)',
                        //hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: Gfilblok10,
                        hidden: true
                    },
                    {fill: false,
                        label: 'Филтрация блок 11',
                        backgroundColor: 'rgba(0, 200, 1, 1)',
                        borderColor: 'rgba(0, 101,1, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(50, 50, 50, 1)',
                        data: Gfilblok11,
                        hidden: true
                    },
                    {fill: false,
                        label: 'КВН',
                        backgroundColor: 'rgba(30, 100, 100, 1)',
                        borderColor: 'rgba(100, 200,1, 0.75)',
                        hoverBackgroundColor: 'rgba(101, 200, 200, 1)',
                        hoverBorderColor: 'rgba(50, 50, 50, 1)',
                        data: Gcvn,
                        hidden: false
                    },
                    {fill: false,
                        label: 'Ниво дренажен кладенец',
                        backgroundColor: 'rgba(30, 100, 100, 1)',
                        borderColor: 'rgba(100, 200,1, 0.75)',
                        hoverBackgroundColor: 'rgba(101, 200, 200, 1)',
                        hoverBorderColor: 'rgba(50, 50, 50, 1)',
                        data: Gndk2,
                        hidden: true
                    }
                ]
            };
            $('#reset_zoom').click(function() {
                barGraph.resetZoom();
            })
            $("#save-btn").click(function() {
                $("#mycanvas").get(0).toBlob(function(blob) {
                    saveAs(blob, "chart_1.png");
                });
            });
            var ctx = document.getElementById("mycanvas");
            var barGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata,
                options: {
                    title: {
                display: true,
                text: 'Диаграма - Отвеси и филтрации'
            },
                    scales: {
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '[mm] , [l/s]'
                            },
                            ticks: {
                                beginAtZero:false
                            }
                        }],
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Дата/Час'
                            },
                        ticks: {
                            beginAtZero:true
                        }
                        }]
                    },
                    // Container for pan options
                    pan: {
                        // Boolean to enable panning
                        enabled: true,

                        // Panning directions. Remove the appropriate direction to disable
                        // Eg. 'y' would only allow panning in the y direction
                        mode: 'y'
                    },

                    // Container for zoom options
                    zoom: {
                        // Boolean to enable zooming
                        enabled: true,

                        // Zooming directions. Remove the appropriate direction to disable
                        // Eg. 'y' would only allow zooming in the y direction
                        mode: 'xy'

                    },
                    animation: {
                        duration: 2000,
                        onProgress: function(animation) {
                            progress.value = animation.currentStep / animation.numSteps;
                        },
                        onComplete: function() {
                            window.setTimeout(function() {
                                progress.value = 0;
                            }, 2000);
                        }
                    },
                    legend: {
                display: true,
                labels: {
                    //fontColor: 'rgb(255, 99, 132)'
                                usePointStyle: true
                }
            }
                },
                plugins: [{
                    beforeDraw: function(c) {
                        var reset_zoom = document.getElementById("reset_zoom"); //reset button
                        var ticks = c.scales['x-axis-0', 'y-axis-0'].ticks.length; //x-axis ticks array
                        var labels = c.data.labels.length; //labels array
                        if (ticks < labels) reset_zoom.hidden = false;
                        else reset_zoom.hidden = true;
                    }
                }]
            }); //end data
        },
        error: function(data) {
            console.log(data);
        }
    });
});

当我没有一天中的特定时间的记录时，也会发生同样的想法。

我在同一张图中更改了xAxes选项，其输出类似：

            xAxes: [{
          type: 'time',
          time: {
            displayFormats: {
              'hour': 'DD MMM YYYY г. HH:MM:SS ч.'
            }
          },
          scaleLabel: {
            display: true,
            labelString: 'Дата/Час'
          },
          ticks: {
            beginAtZero: true
          }
        }]

Answer 1

数据集中的顺序很重要，因为chart.js不会对值进行任何排序。确保从数据库中按日期而不是ID（通常是默认值）对数据进行排序。

Chartjs中的xAxes显示错误

1 个答案: