在 Chart.js 2 中修改散点图的 X 轴标签答案

【问题标题】：Modifying the X-Axis Labels of a Scatterplot in Chart.js 2在 Chart.js 2 中修改散点图的 X 轴标签
【发布时间】：2016-08-04 20:47:00
【问题描述】：

在 Chart.js 2 中，我生成了一个散点图，其中 x 坐标是纪元时间戳，y 坐标是整数。我想知道是否有办法格式化图表的 x 轴标签，以便日期以人类可读的格式显示。

更新：目前我正在以毫秒为单位从 Unix 时间戳构建图表。此原型的其他部分使用 Date 类的 toDateString 方法格式化这些日期（例如，Fri Aug 5 2016）。

【问题讨论】：

您能提供所需格式的示例吗？另外，请提供您当前格式的示例。

标签： javascript chart.js chart.js2

【解决方案1】：

为此，您可以在scales.xAxes 选项中使用ticks.userCallback，以便为每个xaxis 刻度返回一个格式化的日期。如果您使用的是 bundle 版本，则 chartjs 附带了 momentjs，这使得它非常容易，但如果您只是以毫秒为单位传递时间戳，您可以对标签做任何您想做的事情。

options: {
    scales: {
        xAxes: [{
            ticks: {
                userCallback: function(label, index, labels) {
                    return moment(label).format("DD/MM/YY");
                }
             }
        ]}
     }
 }

小提琴https://jsfiddle.net/leighking2/q5ak7p3h/

【讨论】：

它是否是固定 x 轴和 Y 轴的任何参数，因为我已经动态使用它并且当我们的数据集更改时，图表的轴也反映了。

【解决方案2】：

版本 3.4 你可以这样做：

 options: {
        scales: {
            x: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }
        }
    }

【讨论】：