gpt4 book ai didi

jquery - JQPlot - 将点标签移动到图形的起点

转载 作者:行者123 更新时间:2023-12-01 08:23:39 26 4
gpt4 key购买 nike

我一直在研究 jqplot 水平条形图。

我想要这个输出(我希望点标签以百分比表示,并且应该放置在图表的起点)

Expected Outpt

这是我的代码......

$.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%,则不会显示任何内容。并且点数显示为整数。

有没有办法可以将点移动到条形图起点附近?

上面的代码显示了这些示例输出...我希望你能帮助我解决我的问题:(

Sample Output 1

Sample Output 2

谢谢:)

最佳答案

不知何故,我在@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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com