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-ng.js图表呈现为element[0]始终。link这是在 angular 指令的函数中初始化的。配置选项中提供的值被覆盖。

这是一个减少的调用堆栈并从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
...
}
于 2015-04-16T06:23:39.567 回答
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 回答