具有Chart.JS“整理”轴以供使用

Question

我正在玩Chart.JS，并创建了以下示例：

<canvas id="myChart" width="400" height="200"></canvas>
<script>

var records = [
    {
        "time_from": "2018-08-02 07:00:00",
        "time_to": "2018-08-02 08:00:00",
        "usage": "104448"
    },
    {
        "time_from": "2018-08-02 08:00:00",
        "time_to": "2018-08-02 09:00:00",
        "usage": "34441966"
    },
    {
        "time_from": "2018-08-12 09:00:00",
        "time_to": "2018-08-12 10:00:00",
        "usage": "3122439"
    },
    {
        "time_from": "2018-08-13 10:00:00",
        "time_to": "2018-08-13 11:00:00",
        "usage": "273508"
    }
];

var y_axis = records.map(list => { return list.time_from });
var x_axis = records.map(list => { return list.usage });

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: y_axis,
        datasets: [{
            label: "Usage",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: x_axis,
            fill: false
        }]
    },

    // Configuration options go here
    options: {
        hover: {
                    mode: 'nearest',
                    intersect: true
                }
    }
});

// https://gist.github.com/lanqy/5193417
function bytesToSize(bytes) {
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
  if (bytes === 0) return 'n/a'
  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10)
  if (i === 0) return `${bytes} ${sizes[i]}`
  return `${(bytes / (1024 ** i)).toFixed(1)} ${sizes[i]}`
}
</script>

在https://codepen.io/alfredballe84/pen/ZjMwMV上的实时示例

1）是否可以在y轴上使用功能bytesToSize(bytes)。 已解决

2）是否可以让Chart.JS填写我的第一个time_from和最后一个time_from之间的“空白”小时，以便x轴上的时间轴更准确？ / p>

更新

https://codepen.io/alfredballe84/pen/ZjMwMV已更新为bytesToSize，回答了问题1。