javascript - 错误: Highcharts error #13 ionic angular

Question

我是 HighCharts 新手，想将其用于 ionic。但我遇到了麻烦，并试图确定我的代码有什么问题。在控制台上显示一些错误消息，例如 this

我已阅读有关它的问题 Highcharts error #13 and AngularJs How can I fix Highcharts error #13?但还是找不到我的问题这是我的 Controller

    .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>

任何建议都会很有帮助。

Answer 1

我浏览了你的代码，问题是你正在使用 highcharts-ng 并使用 jquery 方式绑定(bind)数据，

执行此操作，在 Controller 内定义一个配置

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

HTML:

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