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

Question

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

这是我的代码：fiddle

THis代码只对图表进行全屏显示。当我尝试在全屏中指向所需的div时：

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

我的全屏被切断了，而且也没有将父div添加到全屏。是不是要把整个带有id的div变成yo，里面的另一个div (<div>Random Data and text.......</div>)作为全屏的一部分？

​

Answer 1

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

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

通过css ...hiding这个元素，设置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>