0

Web ページに (Highcharts を使用して) 小さなグラフを埋め込もうとしています。私がやろうとしていることの例を提供しました。ページが読み込まれると、グラフは mainDiv の内容を上書きしてページ全体を占有します (ここには含めていません)。部門とチャートの寸法を変更してみました。「chart」の「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>
4

2 に答える 2

1

要素の id 属性を「container」から単に「contain」に変更することでこれを修正しました (また、以前に「container」を参照していたコードを「contain」のみを参照するように明らかに変更しました)。

なんらかの理由でこれで問題が解決しましたが、理由はまだよくわかりません。おそらく「コンテナ」は、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>
于 2013-04-26T20:14:31.607 に答える
0

これが機能するかどうかはわかりませんが、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]
    }]
});
于 2013-04-26T20:14:39.827 に答える