angularjs - 无法在highchart中显示每个点的x轴数据

Question

$scope.mData = $firebaseArray(aRef.orderByChild('ts').startAt('2018-07-02').limitToLast(31));
        $scope.mData.$loaded().then(function () {
            $scope.chartSeriesYArray03 = [];
            $scope.chartSeriesXArray03 = [];

            $scope.chartSeries = [];

            angular.forEach($scope.mData, function (value) {
                $scope.chartSeriesXArray03.push(moment(value.ts).format('MMMM Do YYYY, h:mm:ss'));
                $scope.chartSeriesYArray03.push(parseFloat(value.ein));
                $scope.chartSeries.push([
                    Date.parse(value.ts), parseFloat(value.ein)
                    //moment(value.ts).format('MMMM Do YYYY, h:mm:ss'), parseFloat(value.ein)
                ]);
            });

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            var chart003 = Highcharts.chart('chart03', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Half Hourly Energy Consumption'
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Energy (kwh)'
                    }
                },
                series: [{
                    name: 'Meter01',
                    data: $scope.chartSeries,
                    crosshair: true
                }]
            });

            $scope.mData.$watch(function (cb) {
                if(cb.event == 'child_added') {
                    angular.forEach($scope.mData, function (value) {
                        if(value.$id === cb.key) {
                            chart003.series[0].addPoint([
                                Date.parse(value.ts),
                                //moment(value.ts).format('MMMM Do YYYY, h:mm:ss'),
                                parseFloat(value.ein)
                            ], true, true);
                            console.log('test7', moment(value.ts).format('MMMM Do YYYY, h:mm:ss'), parseFloat(value.ein));
                        }
                    });
                }
            });
        });

请参阅图片以了解图表的结果

所以我想要实现的是使用 highcharts 显示来自 firebase 的动态数据。我已经设法推送实时数据，但遇到了没有我也确实推送到代码中的 x 轴值的错误。我遵循了如何告诉 Highcharts 在 x 轴上设置日期，并使用一系列时间（如 1 天）答案并设法以毫秒为单位显示日期。但是，我现在无法在每个条形图下方放置一个值，并且日期仅以如图所示的间隔出现。我该如何去做 1) 将每个数据栏的所有日期放在栏的正下方 2) 确保条形图的间距均匀，尽管它发布的时间不均匀 3) 之后将日期转换为 DD MM YYYY 格式通过 Date.parse() 传递它

谢谢！任何帮助表示赞赏:)

标签： angularjsdatefirebase-realtime-databasehighcharts