从表angularjs

Question

我正在尝试使用angularJS

从html表中获取highcharts数据

这里是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
        }
      });
    }
  }
});

以下是我使用的exaples： http://jsfiddle.net/4mb9k/ http://jsfiddle.net/highcharts/ayycv/ 但它不起作用， 我错过了什么？

Answer 1

我认为您没有正确附加图表。在示例中有$（'＃container'）。highcharts（{.........图表附加到特定的容器元素，在您的情况下，您只是将元素附加到数据源。此外，图表有一个构造函数接受您可以看到的选项和图表配置this example只需将type =“pie”设为type =“bar”您也可以在this link上看到详细的文档和配置。我希望这样将有助于解决您的问题。

使用配置看起来应该是这样的

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);

    }
  }
});