1

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

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

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

样本输出 1

样本输出 2

谢谢 ：）

4

2 回答 2

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');
于 2011-04-15T10:57:35.223 回答
1

要在条形接近 100% 时显示标签，请使用 PointLabelsedgeTolerance选项。

边缘公差

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

正如我对您的问题所评论的那样，我不确定您是否实际发布了用于生成这些图表的代码。这是该代码的直接转储（已修复错别字），这是我可以得到的最接近您的图片的地方，并且对您的原始代码进行了很多更改。

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

于 2011-04-15T04:44:01.883 回答