Chart.js で経過時間をグラフ化

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<canvas id="ffbenchChart" width="300" height="100%"></canvas>

JavaScript

var ctx = document.getElementById('ffbenchChart').getContext('2d');
var chart = new Chart(ctx, {
	type : 'horizontalBar',
  data : {
  	labels : ["経過時間"],
    datasets : [{
    	label : 'Ryzen5 3600 + GTX1660Ti',
      data : [554940],
      backgroundColor: 'rgba(200, 0, 0, 0.6)',
      borderWidth: 0
    },{
    	label : 'Ryzen7 2700x + GTX660Ti',
      data : [494060],
      backgroundColor: 'rgba(200, 102, 0, 0.6)',
      borderWidth: 0
    },{
    	label : 'Core i7-4770 + GTX660',
      data : [1116050],
      backgroundColor: 'rgba(82, 102, 200, 0.6)',
      borderWidth: 0
    }]
  },
  options : {
  	tooltips : {
    	callbacks: {
      	title : function(tooltipItem, data) {
        	console.log(data);
          return data.labels[0];
        },
        label : function(tooltipItem, data) {
        	let value = Number(tooltipItem.value);
          let index = tooltipItem.datasetIndex;
          let label = data.datasets[index].label;
          let duration = moment(value, 'x').format("mm:ss.SSS");
          return label + ":  " + duration;
        }
      },
      position : 'nearest'
    },
  	scales : {
    	xAxes : [{
      	ticks : {
        	beginAtZero : true,
          stepSize: 300000,
          min: 0,
          max: 1200000,
          callback : function(label, index, labels) {
          	console.log("label:" + label + ", index:" + index + ", labels:" + labels);
            let duration = moment(label, 'x').format('mm:ss');
            return duration;
          }
        }
      }]
    },
  	title : {
    	fontSize: 16,
    	display : true,
      position : 'top',
      text : 'Blender2.8 レンダリング時間'
    }
  }
});