Highcharts为什么要拆分?元素占用整个页面

Why does Highcharts <div> element take up the entire page?

本文关键字：元素 为什么 拆分 Highcharts      更新时间：2023-09-26

我试图在我的网页上嵌入一个小图表(使用Highcharts)。我已经提供了一个我正在尝试做的例子。当页面加载时，图表通过覆盖mainDiv中的内容(我没有包括在这里)占据整个页面。我试过修改分割和图表的尺寸。我还查看了"图表"的"renderTo"参数，并尝试将其渲染为对象引用。

有谁知道是什么导致了这个问题吗?我是否在图表中遗漏了一个关键参数?还是我的代码写错了?谢谢。

<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="container" style="width:10px; height:10px;"></div>
<script>
    $(function () { 
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
    </script>

我通过将元素的id属性从"container"更改为"contain"来解决这个问题(并且显然更改了以前引用"container"的任何代码，仅引用"contain")。

无论出于什么原因，这解决了我的问题，尽管我仍然不太确定为什么。也许"container"是Highcharts使用的关键字。

最终代码是这样的:

<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="contain" style="width:10px; height:10px;"></div>
<script>
    $(function () { 
        $('#contain').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
    </script>

不确定这是否会起作用，但您是否尝试过renderTo: 'divname'选项…类似…

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});
相关文章：