Javascript 使用chart.js的3个数据集并非所有数据都可见

我试图创建一个条形图，并在此基础上显示与距离、步长和活动持续时间相关的数据

我已经使用chart.js构建了一个图表，现在我面临的问题是，当我的所有3个数据集都可见时，我的步骤数据不知何故不可见。如果我只是将步骤用作数据集，那么它会显示步骤数据，但不会显示所有三个数据集

这是我的

bar

配置选项，可能我遗漏了什么

使用另一个线程，我试图将xAxis设置为offset:false，但它也不起作用

 barOptions : {

        legend: {
            position: 'bottom'
        },
        tooltips: {
            mode: 'nearest',
            intersect: false,
            filter: function(item, data) {
              var data = data.datasets[item.datasetIndex].data[item.index];
              return !isNaN(data) && data !== null;
            }
        },
        hover: {
            mode: 'nearest',
            intersect: false
        },
        maintainAspectRatio: false,
        scales: {
            yAxes: [{


                ticks: {

                    beginAtZero: true,
                    suggestedMin: 0,


                }
            }],
            xAxes: [{

                type: 'time',

                time: {
                    unit: 'hour',
                    displayFormats: {
                        'millisecond': 'MMM DD',
                        'second': 'MMM DD',
                        'minute': 'HH:mm',
                        'hour': 'hA',
                        'day': 'MMM DD',
                        'week': 'MMM DD',
                        'month': 'MMM DD',
                        'quarter': 'MMM DD',
                        'year': 'MMM DD',
                    },
                },
                offset: false,

            }]
        }
    },

这是我输入图表的数据

var gData ='[{"avgActive_duration":0.0,"avgBlood_glucose":null,"avgDiastolic":null,"avgDistance":738.52099609375,"avgResting_heartrate":null,"avgSteps":875.0,"avgSystolic":null,"avgWeight":null,"timestamp":"Apr 1, 2019 12:40:00 PM"}]';

这是我的小提琴