Chart Time 2

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<div class="chart-container chart-container-1568552428492" style="position:relative;width:100%;height:60vh;"><canvas id="blender_rendering" class="cinebench_single"></canvas></div>
<script>
  var ar = [
    moment("1970-01-01 00:09:14.940 +0000", "YYYY-MM-DD HH:mm:ss.SSS Z").format('x'), // 554940
    moment("1970-01-01 00:08:14.060 +0000", "YYYY-MM-DD HH:mm:ss.SSS Z").format('x'), // 494060
    moment("1970-01-01 00:18:36.050 +0000", "YYYY-MM-DD HH:mm:ss.SSS Z").format('x') // 1116050
  ];
  var ctx = document.getElementById("blender_rendering").getContext("2d");
  var chart = new Chart(ctx, {
    type: "horizontalBar",
    data: {
      labels: ["経過時間（分）", ],
      datasets: [{
        label: "Ryzen5 3600 + GTX1660Ti",
        data: [ar[0], ],
        backgroundColor: "rgba(255, 0, 0, 0.6)",
        borderWidth: 0
      }, {
        label: "Ryzen7 2700X + GTX660Ti",
        data: [ar[1], ],
        backgroundColor: "rgba(255, 102, 0, 0.6)",
        borderWidth: 0
      }, {
        label: "Core i7-4770 + GTX660",
        data: [ar[2], ],
        backgroundColor: "rgba(0, 0, 255, 0.6)",
        borderWidth: 0
      }, ]
    },
    options: {
      maintainAspectRatio: false,
      title: {
        fontSize: 18,
        display: true,
        position: "top",
        text: "Blender 2.8 Cycles 標準 4608px x 3456px : CPUレンダリング"
      },
      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("m 分 s 秒 SSS");
            return label + ":  " +...