如何在JQPlot条形图中绘制十进制值?

时间:2014-09-23 12:57:38

标签: javascript jqplot

我正在使用jqplots生成条形图。我能够为整数生成精确的图形。但是我无法为具有小数点的值生成图表。以下是我使用的代码:

<script type="text/javascript">
$(document).ready(function(){ 
$.jqplot.config.enablePlugins = true;  
var s1 = ['1.5','3.0', '0.0', '0.0', '0.0', '3.0', '0.0'];  
var ticks = ['New mould', 'Raw Material', 'color/size', 'Imported/Catalogue' , 'Printing' , 'plating' , 'other'];   
plot1 = $.jqplot('chart1', [s1], {    
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..           
animate: !$.jqplot.use_excanvas,     
seriesDefaults:{        
renderer:$.jqplot.BarRenderer,         
pointLabels: { show: true }          
},     
axes: {        
xaxis: {     
renderer: $.jqplot.CategoryAxisRenderer,     
ticks: ticks              
},
yaxis: { tickOptions: { formatString: '%.2f' } }
},  highlighter: { show: false } 
});           
$('#chart1').bind('jqplotDataClick',function (ev, seriesIndex, pointIndex, data)
{               
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);          
}       
);   

}); 

</script>

我得到的错误如下:

这[r] ._ ticks [0]未定义 http://blrsrigwd11074.itcinfotech.com:81/Windchill/netmarkets/javascript/report/plugins/jqplot.pointLabels.min.js 第57行

PLease在这个问题上帮助我。

1 个答案:

答案 0 :(得分:3)

我可以通过首先查看您的代码来发现错误。 但我不确定,如果这是导致错误的真正原因。

您正在使用数据数组var s1 = ['1.5', '3.0', '0.0', '0.0', '0.0', '3.0', '0.0']; jqPlot正在尝试从数据数组中读取值,并且它需要IntegerDecimal值。

在您的情况下,您在数组中传递String个值。所以你需要做的就是从值中删除单引号('')。

数组应该是这样的,var s1 = [1.5, 3.0, 0.0, 0.0, 0.0, 3.0, 0.0]; //Remove quotes

为了确认这一点,我通过JSFiddle运行你的代码。这是链接JSFiddle Code

尝试使用小提琴中的数组,带引号的值(var s1 = ['1.5', '3.0', '0.0', '0.0', '0.0', '3.0', '0.0'];)和不带引号(var s1 = [1.5, 3.0, 0.0, 0.0, 0.0, 3.0, 0.0])。带单引号的那个不会绘制条形图。

希望它有所帮助。