首页 > 解决方案 > 使用 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"}]';

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

标签: javascriptchart.jschart.js2

解决方案


推荐阅读