Время графика по оси x в 24-часовом формате (с интервалом в 1 минуту) с полосой прокрутки в пузырьковой диаграмме с использованием Chart.js версии 2.4x plus

Question

Я использую Chart.js V2.x для создания диаграммы Bubble, и ниже мое требование.Пожалуйста, поддержите меня в следующем вопросе:

ТРЕБОВАНИЕ: - 1) Для отображения времени по оси х в 24-часовом формате с интервалом в 1 минуту, то есть общее количество шкал должно составлять 1440.Значение оси Y будет отображаться как нечисловое.Например, User1, User2 ... и т. Д.

2) Должны быть горизонтальные и вертикальные полосы прокрутки, когда данные растут динамически.Когда пользователь прокручивает полосу прокрутки по оси X, данные по оси Y не должны перемещаться, и наоборот.

3) Было бы несколько наборов данных.Когда пользователь наводит курсор мыши на пузырь, во всплывающих подсказках должны отображаться имя пользователя (ось y), отметка времени и имя набора данных (т. Е. Если несколько наборов данных показывают одинаковые данные, то во всплывающих подсказках отображаются подробные сведения о нескольких наборах данных. Например, = User1, Dateset1, 14:30; Dataset2, 14:30)

ВОПРОСЫ: (http://jsfiddle.net/vfot7nmh/) 1) Метки оси X не отображаются при использовании метки времени unix в качестве минимального и максимального значений.Кроме того, при задании интервала в 1 минуту шкалы настолько близки, что данные продолжают перекрываться.Пожалуйста, предложите отображать время в 24-часовом формате с интервалом в 1 минуту.

2) При прокрутке по оси Y данные по оси Y продолжают перекрываться друг с другом.Пожалуйста, предложите, как можно использовать прокрутку по осям x и y?

3) Если данные нескольких наборов данных совпадают в одних и тех же точках, то в подсказке должно отображаться значение всех наборов данных.

Исходный код: Пользователи

var ctx = document.getElementById("myChart").getContext("2d");

let myBubbleData = [{"x":1502531100000,"y":6,"r":3},{"x":1502532000000,"y":6,"r":3},{"x":1502534700000,"y":6,"r":3},{"x":1502535600000,"y":6,"r":3},{"x":1502536500000,"y":6,"r":3},{},{"x":1502538300000,"y":6,"r":3},{},{"x":1502540100000,"y":6,"r":3},{"x":1502542800000,"y":6,"r":3},{"x":1502546400000,"y":6,"r":3}];

 var chart = {
          type: 'bubble',
          data: {
                    datasets: [{
                        data: myBubbleData
                    }] 
                },
          options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                    yAxes: [{
                        display: true,
                        position: 'left',
                        ticks: {
                            min: 0,
                            stepSize: 1,
                            max: 10
                        },
                        gridLines : {
                            display : true
                        }
                    }],

                    xAxes: [{
                        type: 'time',
                        ticks: {
                            maxRotation: 90,
                            minRotation: 80,
                        },
                        time: {
                            format: 'HH:mm',
                            tooltipFormat: 'HH:mm',
                            unit: 'minute',
                            min:1502476200000, 
                            max:1502562599000, 
                            stepSize: 3,
                            displayFormats: {
                                'minute': 'HH:mm',
                                'hour': 'HH:mm'
                            }
                        },
                        gridLines : {
                            display : false
                        } 
                    }]
                  },
              animation: {
                    onComplete: function(animation) {
                        var sourceCanvas = myLiveChart.chart.canvas;
                        var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
                        var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
                        var targetCtx = document.getElementById("myChartAxis").getContext("2d");
                        targetCtx.canvas.width = copyWidth;
                         targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
                    }
                }
          }
    };
 var myLiveChart = new Chart(ctx, chart);


.chartWrapper {
    position: relative;

}

.chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}
.chartAreaWrapper {
  overflow-x: scroll;
    position: relative;
  /*   width: 100%; */
}

.chartAreaWrapper2 {
    position: relative;
    height: 300px;
}