jqplot, remove outside border

问题:

How to remove outside borders of jqplot, Please take a look at following screenshot. I tried with different options and searched for it, ButI didn't get a solution.

Here is my code,

plot1 = $.jqplot(container, [data], {
        title: 'title',
        animate: true,
        animateReplot: true,
        seriesColors:['#00ADEE'],
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            shadow: false
        },
        axesDefaults: {
        },
        highlighter: {
            tooltipAxes: 'y',
            show: true,
            tooltipLocation: 'sw',
            formatString: '<table class="jqplot-highlighter"> \
      <tr><td>test:</td><td>%s</td></tr></table>'
        },
        grid: {borderColor: 'transparent', shadow: false, drawBorder: false, shadowColor: 'transparent'},
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks:ticks
            },
            yaxis: {
                max:1000
            }
        }
    });

Please help me out. Thanks in advance.

---

Here is the JsFiddle link, I want to remove the outside border.

回答1:

You can register a custom function in postDrawHooks, to be fired after plugin initialization.

The idea is to use this function to draw a white border rectangle on top of the chart, that makes the outside borders invisible.

$.jqplot.postDrawHooks.push(function() {
    var $canvasMain = $("#chart1 canvas.jqplot-grid-canvas"),
        $canvasLines = $("#chart1 canvas.jqplot-series-canvas"),
        canvasSize = { 
            x: parseInt($canvasLines.attr('width')), 
            y: parseInt($canvasLines.attr('height'))
        },
        ctx = $canvasMain[0].getContext('2d');

    ctx.strokeStyle = 'white';
    ctx.lineWidth = 6; // 6 to hide shadows and the larger bottom side
    ctx.rect($canvasLines.position().left,
             $canvasLines.position().top,
             canvasSize.x,
             canvasSize.y + 3);
    ctx.stroke();    
});

jsFiddle

You can see that the outside borders are gone:

This works fine, but personally I would just go ahead and modify the source to skip the outside borders. The plugin is double licensed with GPLv2 and MIT, so I guess there are no problems going that route.

Solution 2

I found out that if you change this

grid: {borderColor: 'transparent', shadow: false, drawBorder: false, shadowColor: 'transparent'},

to

grid: {borderColor: 'white', shadow: false, drawBorder: true},

the outside border disappears (kind of what I do above), but still some tick marks on x axis appear. I've set showTickMarks: false to no success.

See jsFiddle

回答2:

The outside border is not a jqPlot border, they are the outermost gridlines. Hence to remove this "border" you will need to turn the gridlines off.

You can turn off these gridlines by adding:

drawGridlines: false

to your grid properties e.g.

grid: {
 drawGridlines: false,
 borderColor: 'transparent',
 shadow: false,
 drawBorder: false,
 shadowColor: 'transparent'
}

As you have the highlight option enabled, this will be a viable option for you, as you can see the point values when you hover over them.

回答3:

Simply setting drawBorder:false worked for me:

grid: {drawBorder: false},