我与chartjs合作来显示传感器量度。我用 multi axis solution。 我正在尝试做的是配备湿度计和雨量计传感器的生产线。 我确实遇到了问题，线条显示得很好，但是条形交错。 Here is an example of my issue。选择“ Station2（Rangée27）”，然后查看“Humiditédu sol”。您也可以查看“温度”图表。 如您所见，条形图与线不对齐，但是 我真的花了很多时间来了解原因并找出错误，您的帮助将不胜感激。
从浏览器中，您可以看到get_measures.php返回什么。我添加一个console.log（）
console.log("Temperature Success:",data);
console.log("Moisture Success:",data);
这是我的代码： （对于温度，代码几乎相同。对于温度，我未在config_multiAxies（data）上指定参数y-axis-0和y-axis-1，并且我没有两个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 = ' ';
$('#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
};
}
我非常感谢任何提示和提示，以使条形与线条对齐。随时询问其他信息
编辑： 我刚刚发现（针对温度）如果我不激活该行代表的传感器，则该条显示良好，如果该条显示为“单独”。是线和条的混合“移动”了条
答案 0 :(得分：0)
好吧，我想我已经确定了问题所在 通过注释这些行
/*,
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD MMM YY'
}
}
*/
我必须进行更好的调查，但是我会用更好的方式更正这部分代码
time: {
unit: 'hour',
stepSize: 1,
displayFormats: {
'hour': 'ha'
}
}