jqPlotの棒グラフでバーを消して非表示にする方法

JavaScript

yamashita

2018.07.26

みなさんごきげんよう。
FE最新作⇒スマブラ⇒オクトパストラベラーとSwitchの購入予定時期がどんどん早まってきてる気がするyamashitaです。

今回はjqPlotで作成した「グラフの各パーツを消したり表示できるようにしたらグラフの使い勝手も広がるのでは？」
と思ったのでそのまんま棒や数字の表示非表示を切り替える（Switchする）方法を調べたのでご紹介したいと思います。

消します

jqPlotで棒グラフを作ります。作り方はここでは割愛します。
このように1日に二つの商品がいくつ売れたかというグラフを想定します。

jqPlotではcanvasを幾つも書き出してグラフを表示しています。

classで各パーツを描画しているのでclass指定で.hide()か.remove()すれば消すことができます。
今回は表示と非表示を切り替えたいので.hide()にしたいと思います。

function displayBar1() {
    if ($('.jqplot-series-canvas').is(':hidden')) {
       $('.jqplot-series-canvas').eq(0).show();
    } else {
        $('.jqplot-series-canvas').eq(0).hide();
    }
}
function displayBar2() {
    if ($('.jqplot-series-canvas').is(':hidden')) {
        $('.jqplot-series-canvas').eq(1).show();
    } else {
        $('.jqplot-series-canvas').eq(1).hide();
    }
}

バーはjqplot-series-canvasクラスのため上のようなコードになります。
要素の数に応じて動的に改良したりしてください。
バーの上の数字はjqplot-point-labelを消せば見えなくなります。

他にもたくさん部品があるのでclassと照らし合わせて試してみてください。
それでは。