我有一个包含代码的图表:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Intensidade');
data.addColumn('number', 'Afundamento %');
data.addColumn('number', 'Elevação %');
var fool =[<?php echo $jsRows_intensidade_eleva; ?>];
data.addRows(fool);
var foo = [<?php echo $jsRows_intensidade;?>];
data.addRows(foo);
var options = {
title: '',
hAxis: {title: 'Intensidade (p.u.)', minValue: 0, maxValue: 2},
vAxis: {title: 'Prob. de ocorrência em %', minValue: 0, maxValue: 100}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_intensidade_NRS-048'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
其中数组写为:
//$jsRows[] = "['Duração','Afundamento']";
for($i=0;$i<count($datay_afunda_intensidade);$i++){
$jsRows_intensidade[] = "[{$datax_afunda_intensidade[$i]},{$datay_afunda_intensidade[$i]},null]";
}
//$jsRows_eleva[] ="['Duração','Elevação']";
for($i=0;$i<count($datay_eleva_intensidade);$i++){
$jsRows_intensidade_eleva[] = "[{$datax_eleva_intensidade[$i]},null,{$datay_eleva_intensidade[$i]}]";
}
$jsRows_intensidade = implode(",",$jsRows_intensidade);
$jsRows_intensidade_eleva = implode(",",$jsRows_intensidade_eleva);
但是它只显示了'Afundamento%'列中显示的行集,它忽略了第二行。有没有人在这段代码中看到错误?它刚刚工作了一段时间。提前谢谢。
修改
jsRows_intensidade = [0.53,12.5,null],[0.59,25,null],[0.54,12.5,null],[0.55,12.5,null],[1,12.5,null],[0.36,12.5,空],[0.01,12.5,空]
js_Rows_intensidade_eleva = [1.5,null,50],[1,null,50]
答案 0 :(得分:1)
这可能是图表太窄而无法显示数据的情况。 API测量任意两个数据点之间的最小距离,并将其指定为数据单位中的最大条组宽度(在您的情况下为0.01)。域轴的长度(ColumnCharts的x轴)除以此值以获得可绘制的总条形图组的数量,单个条形图组的像素宽度通过除以图表的宽度来确定区域(绘制条形的部分)的最大条形组数。在每个条形组中,API为条形组之间保留填充空间(默认情况下约为33%),然后为从第一系列数据开始的条形保留空间(即使条形在给定轴上没有数据,条形也会保留空间)值)。如果条形图组空间不足,则任何剩余的条形图的宽度都为0,这就是第二个系列所发生的情况。
有几种方法可以解决这个问题:
chartArea.width
选项增加图表区域的宽度。bar.groupWidth
选项设置为大于值来增加分配给条形图的组宽度的百分比来为条形图组提供一些额外的空间来绘制条形图。默认值(~67%,最大100%)(例如:http://jsfiddle.net/asgallant/umVHX/)。