Chartjs Y軸で時間のあるカスタム凡例

Question

私はchart.jsで非常に簡単なグラフを作成しています.2つの小さな問題を抱えています。以下は

は、私は現在のチャートはここで見ることができ

<div style="width: 400px; height: 400px;"> 
<canvas name="myChart" id="myChart" width="400px" height="400px"> </canvas> 
</div> 

<script> 
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
type: 'bar', 
animation: false, 
data: { 
    labels: ["Service A", "Service B", "Service C"], 
    datasets: [{ 
     label: 'Time In Service', 
     data: [180, 360, 180], 
     backgroundColor: [ 
      '#0073CF', 
      '#FF0000', 
      '#7DC24B' 
     ], 
     borderColor: [ 
      '#fff', 
      '#fff', 
      '#fff' 
     ], 
     borderWidth: 2 
    }] 
}, 
options: { 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero:true 
      } 
     }] 
    } 
} 
}); 

チャート/グラフを作成するために使用していたコードであるChart Generated は何が必要であることはChart Needed

1. のようなものが欲しいです凡例の右側のx軸ラベル
2. 現在、データの時間は秒です。私は時間をx軸に費やす時間を表示したい：min

少しの助けになります。

Answer 1

は、このような試みを持って、

は、データ構造を少し変更し、必要なラベルフォーマットを表示するために、Y =軸のプロパティを設定する必要があります。

P.S：ポジション権限の機能が最近追加されたため、最新のchart.jsライブラリを使用する必要があります。また、hh：mm形式の意味のあるデータを表示するために、この問題を解決する

function formatTime(secs) 
 
{ 
 
    var hours = Math.floor(secs/(60 * 60)); 
 
    
 
    var divisor_for_minutes = secs % (60 * 60); 
 
    var minutes = Math.floor(divisor_for_minutes/60); 
 
    
 
    var divisor_for_seconds = divisor_for_minutes % 60; 
 
    var seconds = Math.ceil(divisor_for_seconds); 
 
    
 
    return hours + ":" + minutes; 
 
} 
 

 

 
var ctx = document.getElementById("myChart"); 
 

 

 
var myChart = new Chart(ctx, { 
 
type: 'bar', 
 
animation: false, 
 
data: { 
 
    labels: ["Time"], 
 
    datasets: [{ 
 
     label: "Service A", 
 
     data: [1800], 
 
     backgroundColor: '#0073CF', 
 
     borderColor: '#fff', 
 
     borderWidth: 2 
 
    }, 
 
    { 
 
     label: "Service B", 
 
     data: [36000], 
 
     backgroundColor: '#FF0000', 
 
     borderColor: '#fff', 
 
     borderWidth: 2 
 
    }, 
 
    { 
 
     label: "Service C", 
 
     data: [8000], 
 
     backgroundColor: '#7DC24B', 
 
     borderColor: '#fff', 
 
     borderWidth: 2 
 
    }] 
 
}, 
 
options: { 
 
    scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero:true, 
 
       callback: function(label, index, labels) { 
 
       return formatTime(label); 
 
       } 
 
      } 
 
     }] 
 
    }, 
 
    legend: { 
 
      position: "right", 
 
      display:true 
 
     
 
     } 
 
} 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<div style="width: 400px; height: 400px;"> 
 
<canvas name="myChart" id="myChart" width="400px" height="400px"> </canvas> 
 
</div>