Javascript 为什么条未与y轴对齐
我用它来显示传感器测量值。我用 . 我正试图做的是有一个湿度和酒吧线雨量计传感器。 我的问题是，这些线显示得很好，但条是交错的。 . 选择站2 Rangeée 27并查看太阳湿度。你也可以看看温度梯度。 正如您所看到的，该条线没有与直线对齐，但没有对齐 我真的花了很多时间去理解为什么，并找出了错误，你的帮助将不胜感激 从浏览器中，您可以看到返回get_measures.php的内容。我添加了一个console.logJavascript 为什么条未与y轴对齐,javascript,charts,chart.js,bar-chart,Javascript,Charts,Chart.js,Bar Chart,我用它来显示传感器测量值。我用 . 我正试图做的是有一个湿度和酒吧线雨量计传感器。 我的问题是，这些线显示得很好，但条是交错的。 . 选择站2 Rangeée 27并查看太阳湿度。你也可以看看温度梯度。 正如您所看到的，该条线没有与直线对齐，但没有对齐 我真的花了很多时间去理解为什么，并找出了错误，你的帮助将不胜感激 从浏览器中，您可以看到返回get_measures.php的内容。我添加了一个console.log console.log("Temperature Success:",data
console.log("Temperature Success:",data);
console.log("Moisture Success:",data);
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
};
}
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);
}
*/
}
}
});
}
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
};
}
我刚刚发现，对于温度，如果我不激活由测线重新显示的传感器，如果该测线单独显示，则该测线显示良好。是线条和线条的混合移动了线条，我想，我把问题定位了 通过评论这些话
/*,
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD MMM YY'
}
}
*/
time: {
unit: 'hour',
stepSize: 1,
displayFormats: {
'hour': 'ha'
}
}
将代码减少到重现错误所需的最小值。以目前的形式，你的问题需要大量的时间来理解这个问题。这使得您的问题a难以理解和回答，b不太可能帮助其他用户解决类似问题。在问题中添加a表示对其他用户及其时间的尊重。live项目不算作mcve，因为：a它不是最小值，b一旦提供答案，您将更改它，它将不再与问题相关，使您的问题不再对其他人有用。您希望您的问题对其他人尽可能有用，因为它大大增加了获得答案的机会。您好，谢谢您的回复。我简化了这个问题，因为两个代码都很相似。然后我问了我关于湿度的问题。此外，获取水分的功能工作正常。我粘贴了它以供参考。问题来自配置多轴数据，我在其中配置图表。我希望你能帮忙