Question

我在angularJS指令中包含一个高图，我正在尝试添加一个应该显示在图表下方的按钮。问题是按钮不存在。

HTML：

<div id="container" my-chart style="height: 400px; margin-top: 1em"></div>

JS：

var app = angular.module('app', []);
app.directive('myChart', function () {
    return {
        restrict: 'A',
        replace: true,

        template: '<div><div id="chart"></div><div><button id="btn">Click</button></div><div>',
        link: function (scope, elem, attrs) {
            elem.highcharts({
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },

                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]

            });
        }
    }
});

请参阅此JsFiddle，例如。

更新：这是实施答案后的固定JsFiddle。

Answer 1

这是因为你在元素上调用.highcharts（）所以它删除里面的所有内容并在里面呈现图表。尝试使用这样的模板：

<div>
    <div id="chart"></div>
    <div><button id="btn">Click</button></div>
</div>

然后在你的指令链接函数调用：

$("#chart").highcharts({})

而不是这个id选择器你可以使用你想要的任何类型的选择器。您可以放置类，然后使用类图表在元素子上调用它：

$(elem).children(".chart").highcharts({...

Answer 2

我认为如果您想以高图方式添加按钮，也许这个小提琴可以帮助您：

fiddle

exporting: {
        buttons: {
            customButton: {
                x: -62,
                onclick: function () {
                    alert('Clicked');
                },
                symbol: 'circle'
            }
        }
    }

angularJS指令中的Highchart

2 个答案: