Блог

Я пытаюсь создать столбчатую диаграмму и на ее основе показываю данные, относящиеся к расстоянию, шагам и продолжительности активности.

Я использовал chart.js чтобы построить диаграмму, теперь проблема, с которой я сталкиваюсь, заключается в том, что данные моих шагов каким-то образом не отображаются, когда у меня видны все 3 набора данных. если я просто использую шаги в качестве набора данных, то он показывает данные шагов, но не со всеми тремя наборами данных.

Вот мой вариант bar настройки, возможно, я что-то упускаю.

используя другой поток, я также попытался установить для оси X значение 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) amp;amp; 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 /