5

如何删除 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链接，我想删除外部边框。

4

3 回答 3

7

您可以在postDrawHooks中注册一个自定义函数，以便在插件初始化后触发。

想法是使用此函数在图表顶部绘制一个白色边框矩形，使外部边框不可见。

$.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 的双重许可，所以我想走这条路没有问题。

解决方案 2

我发现如果你改变这个

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

至

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

外部边框消失了（就像我在上面所做的那样），但在 x 轴上仍然出现了一些刻度线。我已经设置showTickMarks: false为没有成功。

见jsFiddle

于 2013-10-31T18:45:39.460 回答
6

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

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

drawGridlines: false

到您的网格属性，例如

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

当您启用了突出显示选项时，这对您来说将是一个可行的选项，因为当您将鼠标悬停在它们上时您可以看到点值。

于 2013-10-31T13:03:06.617 回答
1

简单的设置drawBorder:false对我有用：

grid: {drawBorder: false},
于 2014-03-02T00:43:08.933 回答