Highchart:如何在angularjs控制器中更改y轴标题文本?

时间:2018-01-04 18:38:16

标签: angularjs highcharts angularjs-directive

我创建了高图指令



App.directive('hcChart', function ($parse) {
    'use strict';
    return {
        restrict: 'E',
        replace: true
        ,
        template: '<div><div class="chart"></div></div></div>',
        link: function (scope, element, attrs) {
            attrs.chart = new Highcharts.chart(element[0], {

                xAxis: {
                    title: {
                        text: "Date"
                    },
                    type: 'datetime'
//                    labels: {
//                        step: 24
//                    }
//                    ,
//                     tickInterval:  2  
                },
                yAxis: {
                    title: {
                        text: "Value"
                    }
                },
                dataLabels: {
                    enabled: true
                }
                ,
                title: {
                    text: ""
                },
                chart: {
                    opacity: 0.51,
                    backgroundColor: "white",
//                    plotBackgroundColor: 'rgba(0, 0, 0, 0.7)',
                    plotBackgroundColor: 'white',
//                    width: 1600,
                    height: 800,
                    zoomType: 'x',
                    resetZoomButton: {
                        position: {
                            x: -140,
                            y: 0
                        }
                    }
                },
                tooltip: {
                    crosshairs: {
                        width: 3,
                        color: 'black',
                        dashStyle: 'shortdot'
                    }
&#13;
&#13;
&#13;

如何在控制器内更改y轴标题文本。 因为我想为不同的选择显示不同的单位。

控制器内部使用$ scope.myseries作为数据,使用$ scope.categories作为x轴日期时间。

html代码

<hc-chart   id="container" categories="{{myCategories}}" series="{{mySeries}}">Placeholder for generic chart </hc-chart>

如何使用$ scope更新y轴? 我尝试使用

$scope.yAxis[0].setTitle({text : "abc"})

但它的投掷错误。未定义的财产。 请帮忙!

1 个答案:

答案 0 :(得分:0)

要在angularjs控制器中更改yAxis标题,我们需要设置其属性:

                    Highcharts.charts[0].yAxis[0].setTitle({
                    text: $scope.NAME
                    });