angularjs和highcharts,标签未显示,除非我将鼠标悬停在数据点上

时间:2017-02-23 06:01:37

标签: javascript angularjs highcharts

我将angularjs与highcharts一起使用,我想显示所有标签而不悬停在数据点上,如下所示:

enter image description here

根据文件,以下图表选项应该起作用

plotOptions: {
  line: {
    dataLabels: {
      enabled: true
    },
    enableMouseTracking: false
  }
},

但是使用ng-highcharts,我只能得到这个,

enter image description here

任何想法为什么?

附加源代码

HTML

<div ng-app="myapp" ng-controller="main" style="margin-top: 60px; ">
  <highchart id="chart1" config="chartConfig">
  </highchart>
</div>

JS:

var app = angular.module('myapp', ['highcharts-ng']);
app.controller('main', ['$scope', '$http', function($scope, $http) {

  $scope.chartConfig = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Test'
    },
    xAxis: {
      categories: [1, 2, 3, 4, 5]
    },
    yAxis: {
      title: {
        text: 'Price'
      }
    },
    plotOptions: {
      line: {
        dataLabels: {
          enabled: true
        },
        enableMouseTracking: false
      }
    },
    series: [{
      name: 'Field1',
      data: [100, 105, 108, 111, 130]
    }, {
      name: 'Field2',
      data: [210, 215, 218, 231, 240]
    }]
  };
}]);

1 个答案:

答案 0 :(得分:1)

这似乎对我有用。也许你的$scope.chartConfig被修改了?

工作示例:http://codepen.io/DeividasK/pen/NpKZjN?editors=1010