在 AG-Grid 图表上设置标签格式

【问题标题】：Format labels on AG-Grid charts在 AG-Grid 图表上设置标签格式
【发布时间】：2020-04-27 06:09:20
【问题描述】：

如何格式化显示在 AG-Grid 图表轴上的标签？我有很多时间序列数据，所以我希望用户经常生成横轴为日期的图表。不幸的是，这会产生不可读的图表标签，因为日期没有格式化（见附图） - 标签看起来像“2020 年 1 月 9 日星期四 00:00:00 GMT+0000（格林威治标准时间）”，而我想要的只是“ 2020 年 1 月 9 日”。我的网格中的日期看起来很好，这要归功于日期的 valueFormatter。

用户使用日期生成数据透视表也很常见。这对标签产生了同样糟糕的结果，但我发现我可以使用“processSecondaryColGroupDef”来格式化出现在列标题中的日期。是否有类似的方法可以对图表执行此操作？

谢谢你，特洛伊。

【问题讨论】：

标签： javascript ag-grid ag-grid-react

【解决方案1】：

来自文档 -

对于时间轴，可以提供一个格式字符串，用于格式化数据以显示为轴标签

您可以将轴类型显式设置为“时间”，但也可以将其删除，图表仍将使用时间轴，因为它会自动从日期列中的数据中检测轴类型。

您可以实现 processChartOptions 回调并添加您的自定义 -

processChartOptions(params) {
    var options = params.options;
    var dateFormatter = function(params) {
      return params.value.value && para[enter link description here][1]ms.value.value.toLocaleDateString
        ? params.value.value.toLocaleDateString()
        : params.value;
    };
    if (["line"].indexOf(params.type) < 0) {
      if (options.xAxis && options.yAxis) {
        options.xAxis.label.formatter = dateFormatter;
        options.yAxis.label.formatter = dateFormatter;
      }
    } else {
      options.xAxis.type = "time";
      options.xAxis.label.format = "%d %B";
    }

示例和详细信息here

【讨论】：