получить данные старшего чарта из таблицы angularjs

Question

получить данные старшего чарта из таблицы angularjs

0

Я пытаюсь получить данные о высоких диаграммах из таблицы html, используя angularJS

здесь html:

<table class="table-count" id="table-count">
  <thead>
    <tr>
      <th>
        Priority
      </th>
      <th>
        Total
      </th>
      <th>
        Active
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="color-P0"></span> P0
      </td>
      <td ng-model="countPriority">
        {{getCount("P0")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P0")}}
      </td>
    </tr>
    <tr>
      <td>
        <span class="color-P1"></span>P1
      </td>
      <td ng-model="countPriority">
        {{getCount("P1")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P1")}}
      </td>
    </tr>
    <tr>
      <td>
        <span class="color-P2"></span>P2
      </td>
      <td ng-model="countPriority">
        {{getCount("P2")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P2")}}
      </td>
    </tr>
    <tr>
      <td>
        <span class="color-P3"></span>P3
      </td>
      <td ng-model="countPriority">
        {{getCount("P3")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P3")}}
      </td>
    </tr>
  </tbody>
</table>

и директива:

.directive('hcPie1', function() {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function($scope, $element) {},
    template: '<div id="container1" style="margin: 0 auto">not working</div>',
    link: function(scope, element, attrs) {
      var chart = new Highcharts.Chart({
        data: {
          table: document.getElementById('table-count')
        },
        chart: {
          renderTo: 'container1',
          backgroundColor: '#afafaf',
          plotBorderWidth: null,
          plotShadow: false,
          margin: [0, 0, 0, 0],
          spacingTop: 0,
          spacingBottom: 0,
          spacingLeft: 0,
          spacingRight: 0,
        },
        title: {
          text: null
        },
        plotOptions: {
          pie: {
            size: '100%',
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
              enabled: false
            }
          }
        },
        tooltip: {
          enabled: false
        },
        labels: {
          enabled: false
        },
        showInLegend: false,
        series: [{
          type: 'pie',
          name: 'Browser share'
        }],
        exporting: {
          enabled: false
        }
      });
    }
  }
});

Вот что я использовал: http://jsfiddle.net/4mb9k/ http://jsfiddle.net/highcharts/ayycv/, но это не работает, что я пропустил?

FrontEndist 28 янв. 2016, в 16:22

Источник

0

Первая проблема: ваш идентификатор таблицы равен id = "table-count", но вы используете неверный идентификатор в данных директивы: {table: document.getElementById ('count-table')}
Nishith Kant Chaturvedi 28 янв. 2016, в 14:30
0

@NishithKantChaturvedi, это моя ошибка, не замеченная, когда я отправил вопрос
FrontEndist 28 янв. 2016, в 14:34

Теги:

javascript

jquery

angularjs

highcharts

1 ответ

Ещё вопросы

Первая проблема: ваш идентификатор таблицы равен id = "table-count", но вы используете неверный идентификатор в данных директивы: {table: document.getElementById ('count-table')}
@NishithKantChaturvedi, это моя ошибка, не замеченная, когда я отправил вопрос

A.Sideris · Answer 1 · 2016-01-28T12-32-00.000Z

Я думаю, что вы не прикрепляете диаграмму должным образом. В примере есть $ ('# container'). Highcharts ({......... График привязан к определенному элементу контейнера, и в вашем случае вы просто присоединяете элемент к источнику данных. Также диаграмма имеет конструктор, который принимает параметры и конфигурации диаграмм, вы можете увидеть этот пример. Просто введите тип = "pie" для type = "bar". Вы можете увидеть подробную документацию и конфигурации также по этой ссылке. Я надеюсь, что это поможет решить вашу проблему.

Он должен выглядеть примерно так с помощью конфигураций

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        title: {
          text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage}%</b>',
          percentageDecimals: 1
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              color: '#000000',
              connectorColor: '#000000',
              formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
              }
            }
          }
        },
        series: [{
          type: 'bar',
          name: 'Browser share',
          data: scope.items
        }]
      });
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});