дай старшему корректный параметр из директивы angularjs

Question

дай старшему корректный параметр из директивы angularjs

0

Я пытаюсь дать правильные параметры для рисования диаграмм с ng-repeat: вот HTML:

<tr ng-repeat="perspective in perspectives">
            <td>
                <div class="hc-pie" items="values"></div>
            </td>
            <td>{{perspective.perfomance}}</td>
            <td>{{perspective.current}}</td>
            <td>{{perspective.previous}}</td>
            <td>{{perspective.variance}}</td>
</tr>

и контроллер:

$scope.perspectives=[
  {perfomance:'AAA',
    current:'a',
    previous:'b',
    variance:'c',
    plus:false,
    graphData:[
      ['value', 32.4],
      ['value', 13.2],
      ['value', 84.5],
      ['value', 19.7],
      ['value', 22.6],
      ['value', 65.5],
      ['value', 77.4],
      ['value', 90.4],
      ['value', 17.6],
      ['value', 59.1],
      ['value', 76.8],
      ['value', 21.1]
        ]
  ];

и директива:

.directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: element[0],
          type: 'column',
          backgroundColor: null
        },
        title: {
          text: null
        },
        subtitle: {
          text: null
        },
        xAxis: {
          categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
          ],
          labels: {
            enabled: false
          },
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          lineColor: 'transparent',
          tickLength: 0
        },
        yAxis: {
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          lineColor: 'transparent',
          min: 0,
          title: {
            text: null
          },
          labels: {
            enabled: false
          }
        },
        tooltip: {
          enabled: false
        },
        plotOptions: {
          column: {
            pointPadding: 0,
            borderWidth: 0,
            states: {
              hover: {
                color: '#FFFFFF'
              }
            }
          }
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'Value',
          color: '#EC5B00',
          data: scope.items

        }]
      });
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);
    }
  }
});

в консоли нет никаких ошибок, но я не могу разглядывать диаграммы, что я думал?

FrontEndist 26 янв. 2016, в 10:29

Источник

1

Можете ли вы создать jsfiddle, показывающий проблему, чтобы кто-то мог ее отладить?
Roco CTZ 26 янв. 2016, в 09:51

Теги:

javascript

angularjs

highcharts

angularjs-directive

angularjs-ng-repeat

1 ответ

Ещё вопросы

Можете ли вы создать jsfiddle, показывающий проблему, чтобы кто-то мог ее отладить?

Nishith Kant Chaturvedi · Answer 1 · 2016-01-26T08-48-00.000Z

Обновление см. Здесь

Есть две ошибки. Во-первых, ваш массив не закрывается должным образом. Во-вторых: вам нужно использовать имя перспективы.graphData вместо значения в div с hc_pie. В контроллере:

$scope.perspectives=[
                     {perfomance:'AAA',
                       current:'a',
                       previous:'b',
                       variance:'c',
                       plus:false,
                       graphData:[
                         ['value', 32.4],
                         ['value', 13.2],
                         ['value', 84.5],
                         ['value', 19.7],
                         ['value', 22.6],
                         ['value', 65.5],
                         ['value', 77.4],
                         ['value', 90.4],
                         ['value', 17.6],
                         ['value', 59.1],
                         ['value', 76.8],
                         ['value', 21.1]
                           ]
                     }
                     ];

и в html используйте следующее

<table><tr ng-repeat="perspective in perspectives">
        <td>
            <div class="hc-pie" items="perspective.graphData"></div>
        </td>
        <td>{{perspective.perfomance}}</td>
        <td>{{perspective.current}}</td>
        <td>{{perspective.previous}}</td>
        <td>{{perspective.variance}}</td>
</tr></table>