使highcharts全屏也全屏包裹图表的div答案

【问题标题】：Make highcharts fullscreen also fullscreen the div wrapping the chart使highcharts全屏也全屏包裹图表的div
【发布时间】：2021-09-05 07:00:48
【问题描述】：

有没有办法让包裹图表的 div 也成为全屏的一部分？

这是我的代码：fiddle

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

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

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

【问题讨论】：

您到底想得到什么？您的 div yo 包含图表。
@s.kuznetsov，到目前为止，我在yo、<div>Random Data and text.......</div> 内还有另一个 div。我希望它也成为全屏的一部分

标签： javascript html jquery highcharts fullscreen

【解决方案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>

【讨论】：