javascript - 为什么条形图未与 y 轴对齐

问题描述

我使用chartjs来显示传感器测量值。我使用多轴解决方案。我想做的是为湿度和条形雨量计传感器设置线。我确实有问题，线条显示得很好，但是条形图是交错的。这是我的问题的一个例子。选择“Station2 (Rangée 27)”并查看“Humidité du sol”。您还可以查看“温度”图表。如您所见，该栏未与线条对齐，但我确实花了很多时间来了解原因并找出错误，您的帮助将不胜感激。

从您的浏览器中，您可以看到 get_measures.php 的返回值。我添加了一个 console.log()

console.log("Temperature Success:",data);
console.log("Moisture Success:",data);

这是我的代码：（对于温度，代码几乎相同。对于温度，我没有指定参数 y-axis-0 和 y-axis-1 并且我在 config_multiAxies(data) 上没有两个 y 轴）

函数 get_moisture 工作正常，我不认为问题来自这里。该函数将参数发送到 get_measures.php，它为chartsjs 返回一个 json 格式的数据。我粘贴它以供参考。滚动到 config_multiAxies(data)，我配置图表的下一个代码。

function get_moisture(para){
    //console.log("get_gauge:",para);

    return $.ajax({
        url: 'include/get_measures.php', 
        type: 'POST',
        data:'type[]=1&type[]=8&y-axis-0=1&y-axis-1=8&'+para, 
        //data:'type[]=1&y-axis-1=1&'+para, 
        //data:'type[]=1&'+para,                                  // data: { pond: pond, from: from, to: to },
        cache: false,
        dataType: 'json',

    // xhr For testing
       xhr: function () {
        var xhr = $.ajaxSettings.xhr();
        xhr.onprogress = function e() {
            // For downloads
            if (e.lengthComputable) {
                console.log("Download ", e.loaded / e.total);
            }
        };
        xhr.upload.onprogress = function (e) {
            // For uploads
            if (e.lengthComputable) {
                //console.log("Upload: ", e.loaded / e.total);
                //$("#loading").show(1);
            }
        };
        return xhr;
    },

        error: function (request, error) {
               console.log("Error......263");
               console.log(request.responseText);     
        },
        success: function (data) {   

            if(data.length <= 0)
            {
            }
            else
            {  
                console.log("Moisture Success:",data);

               // $("#loading").hide(1);
                /*
                if(mychart!=null){
                    mychart.destroy();
                    console.log("NOT NULL DES");
                }
                */

                /* CHECK THIS on consolelog*/
                //if(mychart!=null){
                    //var mCountainer = document.getElementById('moistureContainer');
                    //mCountainer.innerHTML = '&nbsp;';
                    $('#moisture').remove();
                    $('#moistureContainer').append('<canvas id="moisture"><canvas>');
                //}


                var ctx = document.getElementById("moisture").getContext('2d');;
                var conf_moisture = config_multiAxies(data);
                mychart = new Chart(ctx, conf_moisture);
/*
                if(mychart!=null){
                    console.log("destroy");
                    mychart.destroy();
                    mychart = new Chart(ctx, conf_moisture);
                }
                */



            }
        }
    });

}

config_multiAxies（数据）

function config_multiAxies(data) {

    var nb_measures=0;
    for(var i= 0; i < data.length; i++)
    {
        nb_measures = nb_measures + data[i].datasets.data.length;
    }
    //console.log("Number of measures:",nb_measures);


    var data_m_time = [];
    var data_measure_unit = []; 


    //var datas=[];
    var unit;
    var station;
    var datasets = [];


    data_station_name = "No data";
    for(var d= 0; d < data.length; d++)
    {
        if(data[d]['datasets']['yAxisID']=='y-axis-0')
        {
            data_measure_unit[0] = data[d]['unit'];
        }
        if(data[d]['datasets']['yAxisID']=='y-axis-1')
        {
            data_measure_unit[1] = data[d]['unit'];
        }
        //data_measure_unit[d] = data[d]['unit'];

        data_station_name = data[d]['station'];
        datasets.push(data[d]['datasets']);

        data_m_time = data[d]['time'];
    }




   // var progress = document.getElementById('animationProgress');

    return {
               type: 'bar',
                data: {
                    labels: data_m_time,  
                    datasets: datasets 
                },

                options: {
                    title:{
                        display:true,
                        text: data_station_name[0].toUpperCase() + data_station_name.slice(1).toLowerCase() 
                        //text:'toto'
                    },


                    animation: {

                        duration: 50
                    },



                    responsive: true,
                    maintainAspectRatio:false,

                    tooltips: {
                        mode: 'index',
                        intersect: true,
                    },

                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },


                    scales: {

                        xAxes: [{
                            type: 'time',
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Temps (UTC)'
                            },
                            time: {
                                unit: 'day',
                                unitStepSize: 1,
                                displayFormats: {
                                    'day': 'DD MMM YY'
                                }
                            }       
                        }],

                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,

                            position: 'left',
                            id: 'y-axis-0',
                            /*
                            ticks: {
                                maxTicksLimit: 10,
                                suggestedMax: 200,
                                beginAtZero: true
                            },
                            */

                            scaleLabel: {
                                display: true,
                                //labelString: data_measure_unit //[''] // meter or unit
                                labelString: data_measure_unit[0]
                            },
                            gridLines: {
                                drawOnChartArea: true, // only want the grid lines for one axis to show up
                            }
                        },
                        {
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,


                            position: 'right',
                            id: 'y-axis-1',

                            scaleLabel: {
                                display: true,
                                labelString: data_measure_unit[1]
                            },

                                // grid line settings
                            gridLines: {
                                drawOnChartArea: false, // only want the grid lines for one axis to show up
                            }

                        }],
                    } // End scale
                }  // End option
            };

}

我真的很感激任何提示和提示，以便让条与线条很好地对齐。随时询问其他信息

编辑： 我刚刚发现（对于温度），如果我不激活由线路表示的传感器，则该条很好地显示，如果条显示为“单独”。是线条和条形的组合“移动”了条形

标签： javascriptchartschart.jsbar-chart

javascript - 为什么条形图未与 y 轴对齐

问题描述

解决方案

推荐阅读