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

Question

我一直在研究 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%，则不会显示任何内容。点数显示为整数。

有没有办法可以移动条形图起点附近的点？

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

谢谢你:)

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 吗？