Question

在Angular中使用HighChartsNG。我想在给定的Div中显式渲染我的图表，所以我使用options.chart.renderTo ='divId'，但这似乎不起作用

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，但这似乎并未发生。我做错了什么？

Answer 1

就我所见，这是不可能的。 highcharts-ng.js始终将图表呈现为element[0]。这是在angular指令的link函数内初始化的。重写配置选项中提供的值。

这是一个简化的调用堆栈，并从highcharts-ng.js

中提取

link: function (scope, element, attrs) {
...
   var mergedOptions = getMergedOptions(scope, element, config);
...
}

var getMergedOptions = function (scope, element, config) {
...
   mergedOptions.chart.renderTo = element[0]; //line 96
...
}

Answer 2

由于您声明要使用来自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>

angularjs和highcharts / highchartsNG - renderTo not working

2 个答案: