时间戳

首页 > 解决方案 > 在 AG-Grid 图表上设置标签格式

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

问题描述

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

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

谢谢你，特洛伊。在此处输入图像描述

标签： javascriptag-gridag-grid-react

解决方案

从文档 -

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

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

您可以实现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";
    }

示例和详细信息在这里

推荐阅读