javascript - ハイチャート: 「すべて印刷」ボタン

Question

複数のチャートが印刷されるハイチャートの「すべて印刷」ボタンを作成することは可能ですか?

jFiddle: http://jsfiddle.net/highcharts/gd7bB/1/で示されているように、複数のチャートをエクスポートできることはわかっていますが、Highcharts で同様の方法で印刷できるかどうかはわかりません。

Answer 1

exportChart メソッドはパラメーターを受け入れるため、複数のチャートを送信できます。ただし、print メソッドはパラメーターを受け入れません。したがって、印刷するには、chart1.print(); のように各チャートを個別に指定する必要があります。および chart2.print(); それぞれ個別に印刷します。

次の 2 つの回避策があります。

1. Highcharts 印刷を使用せずにページ全体を印刷します。ここに例があります。

2. 両方のグラフを pdf ファイルにエクスポートして、そこにフォームを印刷することができます。複数のグラフを 1 つの pdfにエクスポートする方法の例を次に示します。

Answer 2

これは、直接印刷を行う代替ソリューションです。これはchart.print()関数に基づいていますが、複数のチャートで機能します。

ここでデモを参照してください: http://jsfiddle.net/jim31415/q5Rzu/150/

        //--------------------------------------------------------------------
        $("#print").click(function () {
            printCharts([chart1, chart2, chart3]);
        });


        //--------------------------------------------------------------------
        function printCharts(charts) {

            var origDisplay = [],
                origParent = [],
                body = document.body,
                childNodes = body.childNodes;

            // hide all body content
            Highcharts.each(childNodes, function (node, i) {
                if (node.nodeType === 1) {
                    origDisplay[i] = node.style.display;
                    node.style.display = "none";
                }
            });

            // put the charts back in
            $.each(charts, function (i, chart) {
                origParent[i] = chart.container.parentNode;
                body.appendChild(chart.container);
            });

            // print
            window.print();

            // allow the browser to prepare before reverting
            setTimeout(function () {
                // put the charts back in
                $.each(charts, function (i, chart) {
                    origParent[i].appendChild(chart.container);
                });

                // restore all body content
                Highcharts.each(childNodes, function (node, i) {
                    if (node.nodeType === 1) {
                        node.style.display = origDisplay[i];
                    }
                });
            }, 500);
        }
    });