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 选项。

边缘容差

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

---

当我评论您的问题时，我不确定您是否确实发布了用于生成这些图表的代码。 这里是该代码的直接转储（已修复拼写错误）， 这里是我能找到的最接近你的照片的地方，那就是对原始代码进行了大量更改。

介意发布一个 jsfiddle 来展示您如何生成这些示例吗？