javascript - Y 轴上带有时间的 Chartjs 自定义图例

Question

我正在使用 chart.js 创建一个非常简单的图表，并遇到了两个小问题。

下面是我用来创建图表/图形的代码

<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 轴上花费的时间:分钟

任何小的帮助将不胜感激。

Answer 1

试一试，

需要稍微修改您的数据结构并设置 y=axis 属性以显示所需的标签格式。

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>