Question

我想在网格中找到pointLabel，并且pointLabel与下面的条形图对齐。

这是link

但是pointLabel无法使用偏移定位，因此在某些时候标签会打印出网格。

如何将pointLabel对齐到左边？

＃chart2 .jqplot-point-label {

font-size:.68em;
color:#D4D0C8;
margin:0 0  0 auto;
//margin-left:25px;
//padding: 1px 3px;
background-color: #000000;
}
</style>


function drawBarChart(arr_val, count){

if( arr_val != '' && count != 0){       
        var result = arr_val.split("|");

        var dataBarChart1= new Array();
        var ticks = new Array();
        var dataOut = new Array();

        var temp=0;
        var secondArr = 0;

        for(var i=0; i < result.length; i++){
            if( i % count != 0){
                    temp += parseInt(result[i]);                
            }               
            if( i % count == 0 && count <= i) {
                ticks[secondArr] = result[i - count];
                dataBarChart1[secondArr] = temp;
                dataOut[secondArr] =  result[i - count] + "   " + temp;
                //alert(ticks[secondArr] );
                //alert(dataBarChart1[secondArr]);
                secondArr++;
            }
        }

    plot2 = jQuery.jqplot('chart2',  [dataBarChart1], {
        seriesDefaults: {
            renderer:jQuery.jqplot.BarRenderer,
            shadowAngle: 135,
            rendererOptions:{
                varyBarColor:true,
                barWidth: 3,
                barDirection: 'horizontal',
                showMarker: false

            },
            pointLabels: {  show: true, location:'s', labels:dataOut, ypadding:3, hideZeros:true, edgeTolerance: -30
            },


        },
        grid:{
            drawGridlines: true,
            background: '#000000',
            borderColor:'#D54206',
            drawBorder: true, 
            shadow: false,

            //borderWidth: 1.5,

        },      
         axes:{
            //show:false,
            //pid:0,
             axesDefaults: {

                },
                        yaxis:{
                         renderer: jQuery.jqplot.CategoryAxisRenderer,      
                         ticks:ticks,

                         rendererOptions: {  tickRenderer: jQuery.jqplot.AxisTickRenderer, 
                                        tickOptions: { showLabel:false, showMark: false,showGridline:false  },
                         },
                         borderColor:'#A3D0DB'
                        },
                        xaxis: {
                             ticks: [0,30],
                                tickOptions:{
                                         formatString:'%d',showGridline:true
                                    }, 
                            showTicks:false,
                          borderColor:'#A3D0DB'
                        },

                        x2axis: {
                            borderColor:'#000000' 
                        },
                        y2axis: {
                            borderColor:'#000000' 
                        },



            },


    });
  }
}

Answer 1

我已经解决了！

只需编辑'jqplot.pointLabel.js'文件即可。

            var ell = xax.u2p(pd[i][0]) + p.xOffset(elem, location);

            //define someother location character yourself
            //and then just fix the ell which you want to locate position
            if( location == 'u'){
                ell = 13;   
            }

            var elt = yax.u2p(pd[i][1]) + p.yOffset(elem, location);

Jqplot我如何找到pointLabel

1 个答案: