2

Angular で HighChartsNG を使用しています。特定の Div でチャートを明示的にレンダリングしたいので、options.chart.renderTo = 'divId' を使用しますが、うまくいかないようです

JSFiddleデモ

html:

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div>top</div>
        <hr/>
        <div id="middle">middle</div>
        <hr/>
        <div>bottom</div>
        <hr/>
        <highchart id="chart1" config="highchartsNG"></highchart>
    </div>
</div>

JS

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'bar',
                renderTo: 'middle'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }

});

上記の例では、チャートを明示的に「中央」の div にレンダリングしようとしていますが、それは起こっていないようです。私は何を間違っていますか？

4

2 に答える 2

3

highcharts のrenterTo を使用してチャートを特定の div にレンダリングしたいと述べ、何が間違っているのかを尋ねると、おそらく最良の答えは、renderTo をまったく使用しないことです。他の回答と同様に、HighChartsNG では機能しないようです。

それにもかかわらず、現在の問題に対する解決策を提供するには: HighChartsNg のディレクティブを、次のように表示される div に配置するだけです。

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div>top</div>
        <hr/>
        <div id="middle">middle
            <highchart id="chart1" config="highchartsNG"></highchart>
        </div>
        <hr/>
        <div>bottom</div>
        <hr/>
    </div>
</div>
于 2015-04-16T06:58:13.617 に答える