Блог

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

HTML

 <div id="graph">
<canvas id="line-chart" width="400" height="225"></canvas>          
</div>
<button id="12hours">12 Hours</button>
<button id="24hours">24 Hours</button>
  

JS

 function displayGraph(object) 
{

timestamp = getDataForGraph(object, 'timestamp');
temp1 = getDataForGraph(object, 'temp1');
temp2 = getDataForGraph(object, 'temp2');
temp3 = getDataForGraph(object, 'temp3');

var mychart = new Chart(document.getElementById("line-chart"), {
    type: 'line',

    data: {
        labels: timestamp,
        datasets: [{
                data: temp1,
                label: "Temp 1",
                borderColor: "#ff0000",
                fill: false
            }, {
                data: temp2,
                label: "Temp 2",
                borderColor: "#3bff00",
                fill: false
            }, {
                data: temp3,
                label: "Temp 3",
                borderColor: "#00edff",
                fill: false
            }
        ]
    },
    options: {responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes: [{
                    ticks: {
                        fontSize: 5
                    },
                    type: 'time',
                    time: {
                        unit: 'hour',
                        displayFormats: {
                            hour: 'HH:mm:ss'
                        }
                    }
                }],
            yAxes: [{
                    ticks: {
                        fontSize: 5
                    }
                }]
        }

    }
});

$('#12hours').off().on('click', function () {
    mychart.options.scales.xAxes[0].time.min = '2018-10-29 08:00:00';
    mychart.options.scales.xAxes[0].time.max = '2018-10-29 20:00:00';
    mychart.update();
});

$('#24hours').off().on('click', function () {
    mychart.options.scales.xAxes[0].time.min = '2018-10-29 00:00:00';
    mychart.options.scales.xAxes[0].time.max = '2018-10-29 23:59:59';
    mychart.update();
});
}
  

Текущий вывод при использовании минимальных и максимальных значений.
хотелось бы избавиться от всех значений до 08:00, которые отображаются в левой части осей.

Как это выглядит, когда max и min помещены

Как это выглядит без размещения max или min