Question

我一直在研究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

谢谢：）

Answer 1

不知怎的，我设法在@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');

Answer 2

要允许标签在条形接近100％时显示，请使用PointLabels edgeTolerance选项。

edgeTolerance

标签必须远离轴边界才能绘制的像素数。负值将允许与网格边界重叠。

正如我对您的问题发表评论，我不确定您是否确实发布了用于生成这些图表的代码。 Here是该代码的直接转储（已修复拼写错误），here是我可以获得的最接近您的图片的内容，而且您的原始代码会有很多更改。

介意发布一个jsfiddle，显示你是如何生成这些示例的？

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

2 个答案:

edgeTolerance