2016-10-02 144 views
0

我是HighCharts的新用户,并且希望将其用于离子。但我有麻烦,试图确定我的代码有什么问题。在控制台上的显示我已阅读问题吧 Highcharts error #13 and AngularJs How can I fix Highcharts error #13? 但仍无法找到我的问题一样this错误:Highcharts错误#13离子角

一些错误信息 这是我的控制器

.controller("homeController", function ($scope, $http) { 
$scope.myDropDown = 'one'; 
     $scope.data = {}; 
     $scope.submit = function() { 
      var diagramlink = 'http://fendypradana.com/alfalahkeu/Apifalah/laporhari/format/json'; 

      var processed_json = [], kategori = []; 
      $http.post(diagramlink, { tanggalawal: $scope.data.tglawal, tanggalakhir: $scope.data.tglakhir }).then(function (res) { 

       console.log(res.data); 
       console.log(res.data.data[2].tanggal); 

       for (i = 0; i < res.data.data.length; i++) { 
        var dataint = parseInt(res.data.data[i].total) 
        processed_json.push(dataint); 
        kategori.push(res.data.data[i].tanggal); 

       } 
       console.log(processed_json) 

       Highcharts.chart('containerhome', { 
        title: { 
         text: 'Diagram Pembayaran' 
        }, 

        xAxis: { 
         title: { 
          text: 'coba1' 
         }, 
         categories: kategori 
        }, 

        tooltip: { 
         formatter: function() { 
          return '<b>' + this.x + '</b><br/>' + 
           'Total Pembayaran: Rp.' + Highcharts.numberFormat(this.y, 1); 
         } 
        }, 
        chart: { 
         type: 'column' 
        }, 

        plotOptions: { 

        }, 

        series: [ 
         { 
          name: 'coba', 
          data: processed_json, 

          dataLabels: { 
           enabled: true, 
           rotation: -90, 
           color: '#FFFFFF', 
           align: 'right', 
           x: 4, 
           y: 10, 
           style: { 
            fontSize: '13px', 
            fontFamily: 'Verdana, sans-serif' 
           } 
          } 
         } 

        ] 
       }); 
      }) 
     } 
    }) 

,这是我的HTML

<div ng-app ng-controller="homeController"> 
      <select ng-model="myDropDown"> 
     <option value="one">One</option> 
     <option value="two">Two</option> 
     <option value="three">Three</option> 
</select> 
      <form ng-submit="submit()" ng-show="myDropDown == 'two'"> 
    <label class="item item-input item-stacked-label"> 
        <span class="input-label">Pilih Bulan Awal</span> 
        <input type="date" ng-model="data.tglawal"> 
    </label> 
    <label class="item item-input item-stacked-label"> 
        <span class="input-label">Pilih Bulan akhir</span> 
        <input type="date" ng-model="data.tglakhir"> 
    </label> 
    <input class="button button-block button-positive" type="submit" name="submit" value="Submit to server"> 
    <div class="card" style="width:95%; ng-controller=" homeController "> 
      <div id="containerhome ">Placeholder for chart</div> 
    </div> 
    </form> 

任何建议真的会有所帮助。

+0

你能创建一个plunker吗? – Sajeetharan

+0

@Sajeetharan here http://plnkr.co/edit/rBB3moEVjMP94xgSWOPP?p=preview –

+0

我看到很多参考文献在你的重击中失踪。提供一个团队查看器我可以检查 – Sajeetharan

回答

0

我通过您的代码去了,问题是你正在使用highcharts-NG和使用jQuery的方式将数据绑定,

为此,控制器内,定义一个配置

$scope.highchartsNG = { 
     options: { 
      chart: { 
       type: 'bar' 
      } 
     }, 
     series: [{ 
      data: assign your data 
     }], 
     title: { 
      text: 'Hello' 
     }, 
     loading: false 
    } 

HTML:

<highchart id="chart1" config="highchartsNG"></highchart> 
+0

伟大的答案,你解决了我的问题谢谢 –

+0

不客气 – Sajeetharan