图表显示的值超出最小和最大范围(Chart.js)

时间:2019-04-24 15:12:43

标签: javascript chart.js

当我为图表设置一个最小值和最大值时,它仍会显示压缩到图表左侧的所有MIN值,但最大值会消失。

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之前显示在轴左侧的值。

What it looks like when max and min are placed

What it looks like with no max or min placed

0 个答案:

没有答案