jqplot，去除外边框

Question

如何去掉 jqplot 的外边框，请查看以下截图。我尝试使用不同的选项并进行搜索，但是没有找到解决方案。

以下是我的代码：

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
            }
        }
    });

请帮忙一下，谢谢。

---

这里是JsFiddle的链接，我想去掉外边框。

- Srihari Goud

---

你能准备一个 JSFiddle 吗？ - Udit Bhardwaj

但是如何移除它们 - Srihari Goud

Answer 1

您可以在 postDrawHooks 中注册自定义函数，在插件初始化后触发它。这个功能的想法是在图表顶部绘制一个白色边框矩形，使外部边框不可见。请注意保留html标记。

$.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

你可以看到外部边框已经消失了:

这个方法行得通，但是我个人会直接修改源代码跳过外部边框。该插件采用GPLv2和MIT双重许可证，所以我想这样做没有问题。

解决方案二

我发现如果你改变这个东西

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

to

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

外部边框消失（类似于我上面所做的），但x轴仍然显示一些刻度标记。我已经设置了showTickMarks: false，但没有成功。

请参见jsFiddle

- Jose Rui Santos

Answer 2

外边框不是 jqPlot 的边框，它们是最外层的网格线。因此，要去除这个“边框”，您需要关闭网格线。

您可以通过添加以下内容来关闭这些网格线：

drawGridlines: false

针对您的网格属性，例如：

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

如果你启用了高亮选项，这将是一个可行的选择，因为你可以在悬停时看到点数值。

- Ben Smith

---

不，我知道。我想要移除外边框，而不是内部网格线。 - Srihari Goud

你所要求的是不可能的，因为你看到的不是边框，而是网格线。要删除最外层的网格线，你需要关闭网格。 - Ben Smith

抱歉如果我错了，这是我的客户要求。无论如何，谢谢。 - Srihari Goud

没问题 @SrihariGoud。 - Ben Smith

Answer 3

对我来说，只需设置 drawBorder:false 即可：

grid: {drawBorder: false},

- Huey