无法在高图中显示每个点的x轴数据

时间:2018-07-05 08:46:58

标签: angularjs date firebase-realtime-database highcharts

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

See picture for how the graph turns out

enter image description here

所以我想要实现的是使用highcharts显示firebase中的动态数据。我已经设法将实时数据推入其中,但是遇到了一个错误,即我没有将我的x轴值也推入代码中。我遵循了这个How to tell Highcharts to set date on the x axis, and use a range of time (like 1 day)的答案,并设法以毫秒为单位显示日期。但是,我现在无法在每个条形图下方放置一个值,并且日期仅按时间间隔显示,如图中所示。我该怎么办 1)将每个数据栏的所有日期放在该栏的正下方 2)确保条形图均匀分布,尽管发布时间不均匀 3)将日期通过Date.parse()转换为DD MM YYYY格式

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

0 个答案:

没有答案