angularjs 和 highcharts/highchartsNG - renderTo 不工作

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
    }

});

在上面的示例中，我试图将图表显式呈现为 'middle' 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 不工作

angularjs and highcharts / highchartsNG - renderTo not working

highcharts

angularjs

highcharts-ng