web-dev-qa-db-ja.com

ハイチャート：凡例の非表示と表示

ユーザーがボタンをクリックしたときに、グラフの凡例の表示/非表示を切り替えられるようにしたいと思います。

文書化されていないdestroy()メソッドを使用して凡例を非表示にしようとしましたが、凡例とそのアイテムを再レンダリングしようとすると、アイテムが凡例内ではなくチャートの左上に表示されます。また、アイテムにはイベントハンドラがアタッチされていないようです（アイテムをクリックしても、シリーズは切り替わりません）。

これを行うためのより良い方法はありますか？ SVGとVMLの両方の実装をサポートする必要があるため、両方に対処するソリューションを探しています。

JSFiddleの例

$('#updateLegend').on('click', function (e) {
    var enable = !chart.options.legend.enabled;
    chart.options.legend.enabled = enable;

    if (!enable) {
        chart.legend.destroy(); //"hide" legend
    } else {
        var allItems = chart.legend.allItems;

        //add legend items back to chart
        for (var i = 0; i < allItems.length; i++) {
            var item = allItems[i];
            item.legendItem.add();
            item.legendLine.add();
            item.legendSymbol.add();
        }

        //re-render the legend
        chart.legend.render();
    }
});
javascriptjqueryhighcharts
17
cfs

凡例を破棄する場合、完全な凡例を生成する必要があります。より簡単な解決策は、要素にhide（）/ show（）関数を使用することです。

http://jsfiddle.net/sbochan/3Bh7b/1/

$('#updateLegend').click(function (e) {
        var legend = chart.legend; 

        if(legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
        } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
        }
    });
14
Sebastian Bochan

ここに私が思いついた興味深い解決策があります-Highcharts3とHighstocks1.3で動作します https://bitbucket.org/jkowalleck/highcharts-legendextension

HighchartsExtension をHTMLページに追加するだけで、3つの新しい関数がチャートに追加されます。
myChart.legendHide() 、
myChart.legendShow()および
myChart.legendToggle()

例を参照してください。
フローティング凡例付きのハイチャート： http://jsfiddle.net/P2g6H/
静的な凡例のあるHighstocksの場合： http://jsfiddle.net/ps6Pd/

14
floww

これを行うかなり簡単な方法は、シリーズをループし、凡例を表示しないように更新することです。これにより、メソッドの組み込み時に、凡例の表示と非表示をアニメーション化し、コンテナスペース全体を利用できます。

たとえば、凡例項目の切り替えは次のようになります。

$('#toggleButton').click(function() {
    for(i in chart.series)
        chart.series[i].update({ showInLegend: chart.series[i].options.showInLegend == null ? false : !chart.series[i].options.showInLegend }, false);
    chart.redraw();
});

トグル、ボタンを使用した表示と非表示については、 このJSFiddleデモ を参照してください。

5
Halvor Holsten Strand

単純な

myChartObject.legend.update({
   enabled:true
)};
5
MatteoOreficeIT

選択した回答のコードを少し更新します。これで、凡例を表示/非表示するときにスペースが増えます。

$('#updateLegend').click(function (e) {
    var legend = chart.legend; 

    if(legend.display) {
        legend.group.hide();
        legend.box.hide();
        legend.display = false;
    } else {

        legend.group.show();
        legend.box.show();
        legend.display = true;
    }

    var series = chart.series[0];
        $(chart.series).each(function(){
            this.setVisible(true, false);
        });
        chart.redraw();

});
0
Ali