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

See picture for how the graph turns out

所以我想要实现的是使用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格式

谢谢！任何帮助表示赞赏：）

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

0 个答案: