自定义 Chart js 数据集数据答案

【问题标题】：Customize Chart js dataset data自定义 Chart js 数据集数据
【发布时间】：2021-03-26 02:43:38
【问题描述】：

这是我的图表的样子： https://i.stack.imgur.com/PnDt6.png

我需要在工具提示中以时间格式显示值，例如 00:55:25。此图表需要绘制不同天文台的时间。

这是我的代码。

   var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['activity 1', 'activity 2', 'activity 3'],
            datasets: [{
                label: "Value",
                backgroundColor: "rgba(2,117,216,1)",
                borderColor: "rgba(2,117,216,1)",
                data: [545, 3600, 3211],
            }],
        },
        options: {
            scales: {
                xAxes: [{
                    time: {
                        unit: 'month'
                    },
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        maxTicksLimit: 3
                    }
                }],
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 36000,
                        stepSize: 3600,
                        beginAtZero: true,
                        callback: function (label, index, labels) {
                            console.log(label)
                            switch (label) {
                                case 3600:
                                    return '01:00:00';
                                case 7200:
                                    return '02:00:00';
                                case 10800:
                                    return '03:00:00';
                                case 14400:
                                    return '04:00:00';
                                case 18000:
                                    return '05:00:00';
                                case 21600:
                                    return '06:00:00';
                                case 25200:
                                    return '07:00:00';
                                case 28800:
                                    return '08:00:00';
                            }
                        }
                    },
                }],
            },
            legend: {
                display: false
            }
        }
    });

如何将数据集中的值更改为时间格式或仅在视图中？

【问题讨论】：

标签： javascript charts chart.js bar-chart

【解决方案1】：

我准备了demo here。 convert 函数取自here。您可以按如下方式修改 Chart JS 工具提示：

function convert(time) {   
    // Hours, minutes and seconds
    var hrs = ~~(time / 3600);
    var mins = ~~((time % 3600) / 60);
    var secs = ~~time % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    var ret = "";
    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }
    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;
    return ret;
}

var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['activity 1', 'activity 2', 'activity 3'],
            datasets: [{
                label: "Value",
                backgroundColor: "rgba(2,117,216,1)",
                borderColor: "rgba(2,117,216,1)",
                data: [545, 3600, 32110],
            }],
        },
      options: {
        responsive: true,
            tooltips: {
                callbacks: {
                    label: function(context) {
                        let str = convert(context.yLabel);
                        return str;
                    }
                }
            },
            scales: {
                xAxes: [{
                    time: {
                        unit: 'month'
                    },
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        maxTicksLimit: 3
                    }
                }],
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 36000,
                        stepSize: 3600,
                        beginAtZero: true,
                        callback: function (label, index, labels) {
                            return convert(label);
                        }
                    },
                }],
            },
            legend: {
                display: false
            }
        }
    });

来自ChartJS docs，它建议将工具提示包装在选项内的插件对象中，但它似乎不适用于演示中 CDN 提供的版本。所以你可能需要用插件包装。

【讨论】：