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

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

上面的代码显示了这些示例输出……我希望您可以帮助我解决问题:(





谢谢 :)

最佳答案

我以某种方式设法在@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/

10-13 02:23