jquery - 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 linkです。外側の境界線を削除したいです。

Answer 1

カスタム関数を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();    
});

jsフィドル

外側の境界線がなくなっていることがわかります。

これは問題なく動作しますが、個人的には、ソースを変更して外側の境界線をスキップするだけです。プラグインは GPLv2 と MIT のダブル ライセンスなので、その方法で問題はないと思います。

解決策 2

これを変えると分かった

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

に

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

外側の境界線は消えますが (上記と同じように)、x 軸の目盛りがいくつか表示されます。私はshowTickMarks: false成功しないように設定しました。

jsFiddleを参照してください

Answer 2

設定するだけでdrawBorder:falseうまくいきました：

grid: {drawBorder: false},