Question

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

我已经使用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"}]';

这是我的小提琴https://jsfiddle.net/rxdy97Lh/2/

使用chart.js并非3个数据集都可见

0 个答案: