18

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

文書化されていない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();
    }
});
4

6 に答える 6

14

凡例を破棄する場合は、完全な凡例を生成する必要があります。より簡単な解決策は、要素に 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;
        }
    });
于 2013-07-25T12:23:12.590 に答える
14

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

作成したHighchartsExtensionを HTML ページに追加するだけで、次の 3 つの新しい関数が Chart
myChart.legendHide()に 追加さ
myChart.legendShow()れ ます。
myChart.legendToggle()

例を参照してください:
浮動凡例のハイチャート: http://jsfiddle.net/P2g6H/
静的凡例のハイストック: http://jsfiddle.net/ps6Pd/

于 2013-11-07T21:31:13.307 に答える
5

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

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

$('#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 デモンストレーションを参照してください。

于 2014-08-16T04:20:09.223 に答える
0

選択した回答のコードを少し更新します。凡例の表示/非表示時にスペースを増やすようになりました。

$('#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();

});
于 2016-01-26T10:58:52.337 に答える