使 highcharts 全屏也全屏 div 包装图表

Question

有没有办法让 div 环绕图表部分也成为全屏？

这是我的代码：fiddle

此代码仅显示图表。当我尝试在全屏中指向我需要的 div 时：

Highcharts.FullScreen = function(container) {
        this.init(ontainer.parentNode.parentNode); 
    };

我的全屏被切断了，也没有将父 div 添加到全屏。是否可以将 ID 为 yo 的整个 div 和位于 (<div>Random Data and text.......</div>) 内的另一个 div 作为全屏的一部分？

Answer 1

您可以通过 chart.renderer.text().add() 连接自定义元素的内容，方法是使用 html() 方法指定此元素：

chart.renderer.text(selector.html(), 0, 0).add();

...通过 css 隐藏此元素，设置 display: none:

.random_data {
    display: none;
}

这是要添加的代码：

function (chart) {
        chart.renderer
            .text($(".random_data").html(), 10, 10)
            .css({
                color: "green",
                fontSize: "12px",
            })
            .add();
    }

JavaScript:

let chart = Highcharts.chart(
    "container",
    {
        chart: {
            type: "column",
        },
        title: {
            text: "",
        },
        xAxis: {
            categories: ["one", "two", "three"],
        },

        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
            },
        },
        yAxis: {
            title: {
                text: "",
            },
            endOnTick: false,
        },
        series: [
            {
                name: "books",
                data: [
                    ["one", 64161.71548379661],
                    ["two", 3570.6197029028076],
                    ["three", -200.70625619033547],
                ],
                marker: {
                    symbol: "circle",
                },
            },
        ],
    },
    function (chart) {
        chart.renderer
            .text($(".random_data").html(), 10, 10)
            .css({
                color: "green",
                fontSize: "12px",
            })
            .add();
    }
);

let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
    Highcharts.FullScreen = function (container) {
        console.log(container.parentNode.parentNode);
        this.init(container.parentNode); // main div of the chart
    };

    Highcharts.FullScreen.prototype = {
        init: function (container) {
            if (container.requestFullscreen) {
                container.requestFullscreen();
            } else if (container.mozRequestFullScreen) {
                container.mozRequestFullScreen();
            } else if (container.webkitRequestFullscreen) {
                container.webkitRequestFullscreen();
            } else if (container.msRequestFullscreen) {
                container.msRequestFullscreen();
            }
        },
    };
    chart.fullscreen = new Highcharts.FullScreen(chart.container);
});

CSS:

.random_data {
    display: none;
}

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="yo">
    <div class="random_data">Random Data and text.......</div>
    <div id="container" style="height: 400px; margin-top: 1em;"></div>
</div>
<button id="btn">
    Show full screen
</button>

使 highcharts 全屏也全屏 div 包装图表

Make highcharts fullscreen also fullscreen the div wrapping the chart

html

javascript

jquery

fullscreen

highcharts