我一直在研究jqplot水平条形图。
我想要此输出(我希望点标签以百分比表示,应放置在图形的起点)
这是我的代码.....
$.jqplot.config.enablePlugins = true;
voteResults = [[Chinabank,0],['Citibank',100], ['UOB',0]['POSB',0],['OCBC',0]];
// voteResults = [[Chinabank,50],['Citibank',50], ['UOB',0]['POSB',0],['OCBC',0]];
plot = $.jqplot('chart1', [voteResults], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
barWidth:15,
barMargin: 25
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline:true,
markSize:0
}
},
xaxis:{
ticks:[0,100],
tickOptions:{formatString:'%d\%'}
}
}
});
现在,点标签显示在条形图的末尾,如果点值接近100%,将不会显示任何内容。点数显示为整数。
有没有办法将点移动到条形图起点附近?
上面的代码显示了这些示例输出……我希望您可以帮助我解决问题:(
谢谢 :)
最佳答案
我以某种方式设法在@Matt的帮助下解决了我的问题,并且我添加了几行代码来满足我的需求。我没有将点标签放置在条形图的起点上,而是将其放置在中间以使其更具可读性和外观。
这是我的代码:(如果您认为您有更好的解决方案,欢迎您提出建议)谢谢
var plot = $.jqplot('PollChart', [voteResults], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -50 },
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
barWidth: 15,
barMargin: 25
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
showGridline: true,
markSize: 0
}
},
xaxis: {
ticks: [0, 100],
tickOptions: {
formatString: '%d%',
showGridline: false
}
}
}
});
// these lines here positions the Point Labels at the center of the graph
var ChartStartingPoint = parseInt($('#PollChart .jqplot-series-canvas').css('left'),10);
var ChartWidth = parseInt($('#PollChart .jqplot-series-canvas').css('width'),10);
var PointLabelLocation = (ChartWidth/2)+ ChartStartingPoint;
$('#PollChart .jqplot-point-label').css('left',PointLabelLocation+'px');
关于jquery - JQPlot-将点标签移动到图形的起点,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5672162/