【发布时间】：2018-07-23 01:02:49
【问题描述】：
我与chartjs 合作显示传感器测量值。我用一个 multi axis solution。 我想做的是为湿度和条形雨量计传感器设置线。 我确实有问题，线条显示得很好，但是条形图是交错的。 Here is an example of my issue。选择“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 = ' ';
$('#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
};
}
我非常感谢任何提示和提示，以使条形图与线条很好地对齐。随时询问更多信息
编辑： 我刚刚发现（对于温度），如果我不激活由线路表示的传感器，则该条很好地显示，如果条显示为“单独”。是线条和条形的组合“移动”了条形
【问题讨论】：
-
将代码减少到重现错误所需的最低限度。在当前形式下，您的问题需要大量时间来理解问题。这使得您的问题 a) 难以理解和回答，b) 不太可能帮助其他有类似问题的用户。在问题本身中添加minimal reproducible example 表示尊重其他用户和他们的时间。
-
实时项目不算作 mcve 因为：a) 它不是 minimal 和 b ) 提供答案后，您将对其进行更改，它将不再与问题相关，从而使您的问题不再对其他人有帮助。您希望您的问题对其他人尽可能有用，因为这会大大增加获得答案的机会。
-
您好，感谢您的回复。我简化了问题，因为两个代码都相似。然后我问了关于水分的问题。此外，函数 get_moisture() 工作正常。我粘贴它以供参考。问题来自我配置图表的 config_multiAxies(data) 。我希望你能帮忙
标签： javascript charts chart.js bar-chart