我正在使用jqPlot中的条形图,我需要在图表上用单独的一行显示平均值。我的问题是如何做到这一点?我需要使用折线图吗?我看了几个折线图示例,但它们在条形图中显示为趋势,从图表上的第一个条形开始而不是显示平均值。我需要的是使用显示的所有条形图的平均值绘制线条在图表上(屏幕截图如下)
我绘制数据的JSON字符串如下:
var commonOption= {
title: ''
,stackSeries: true
,captureRightClick: true
,seriesDefaults:{
renderer:$.jqplot.BarRenderer
,rendererOptions: {
barMargin: 15
,highlightMouseDown: true
,fillToZero: true
},
pointLabels: {
show: true
,formatString: '%.1f'
,seriesLabelIndex:1
,hideZeros:false
}
}
,seriesColors: ['#A9CB5E']
,axes: {
xaxis: {
tickOptions:{angle:-45}
,tickRenderer: $.jqplot.CanvasAxisTickRenderer
,renderer: $.jqplot.CategoryAxisRenderer
,ticks: []
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
,padMin: 0
,pad: 1.1
, label: 'Percentage (%)'
,rendererOptions: { forceTickAt0: true}
//,min: 0
//,tickOptions:{formatString: '%.0f'},
}
}
,negativeSeriesColors:['#F08080']
/*,legend: {
show: true
,location: 'e'
,placement: 'outsideGrid'
}*/
,highlighter:{
show: true
,tooltipLocation: 's'
,yvalues: 2
,bringSeriesToFront:true
,showMarker:false
,tooltipAxes: 'y'
,formatString: "%n%s"
}
,cursor:{
show: true
,zoom:true
,showTooltip:false
,constrainZoomTo: 'y'
}
,grid:{
background: '#f8f8f8'
}
};
答案 0 :(得分:4)
我相信你要找的是jqplot CanvasOverlay功能http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html 在函数中声明所有选项和数据后(在" grid"选项之后的示例中):
grid:{
background: '#f8f8f8'
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'avergae',
y: 20.8, //**AVERAGE_FLOAT_VALUE**
lineWidth: 2,
color: 'black',
shadow: false
}}
]
}
修改强> 是的,抱歉。一定不要忘记包括" jqplot.canvasOverlay.min.js"
答案 1 :(得分:2)
您好我认为最好实现一个自动计算数据点到阵列的平均值的函数。实际上你的酒吧字符的平均值大约是18而不是20! 我建议实现一个功能来做这个。请参阅this jsFiddle示例。 有一篇文章展示了如何绘制和计算条形图的统计数据:此链接的平均值,中位数,模式和标准差: http://www.meccanismocomplesso.org/en/mean-mode-median-barchart/。
Array.prototype.average=function(){
var sum=0;
var j=0;
for(var i=0;i<this.length;i++){
if(isFinite(this[i])){
sum=sum+parseFloat(this[i]);
j++;
}
}
if(j===0){
return 0;
}else{
return sum/j;
}
}
...
canvasOverlay: {
show: true,
objects: [
{dashedHorizontalLine: {
name: 'average',
y: data.average(),
lineWidth: 3,
color: 'black',
shadow: false
}}
]
}