使用 Appsmith 和自定义融合图表的时间轴格式

Question

我使用了自定义融合图表（散点图）并且我已经加载了我想要显示的数据。我坚持使用我的数据所需的 x、y 格式。我现在想沿着时间轴 (x) 散布数据。数据的导入非常有效，但轴看起来只是将 x 值用作 String/Integer。有谁知道如何正确格式化 x 轴或将数据设置为时间轴？

我还发现，使用常规图表看起来会好一些，但是时间戳在 x 轴上的比例不正确（可以在第二张图片中看到）。

自定义图表的json：

{
  "type": "scatter",
  "dataSource": {
    "chart": {
      "caption": "Axes",
      "subCaption": "Aggregated History",
      "baseFont": "Helvetica Neue,Arial",
      "xAxisName": "Date",
      "yAxisName": "Price",
      "theme": "fusion"
    },
    "categories": [],
    "dataset": [
      {
        "seriesname": "Offer",
        "showregressionline": "0",
        "data": [
          {
            "x": "2022-01-20T13:50:00Z",
            "y": 105.316
          },
          {
            "x": "2022-02-01T11:16:00Z",
            "y": 104.64
          },
          {
            "x": "2022-02-01T11:16:00Z",
            "y": 104.64
          },
          {
            "x": "2022-02-01T12:18:00Z",
            "y": 104.599
          },
          {
            "x": "2022-02-01T12:18:00Z",
            "y": 104.599
          },
          {
            "x": "2022-02-01T12:19:00Z",
            "y": 104.564
          },
          {
            "x": "2022-02-01T12:49:00Z",
            "y": 104.608
          },
          {
            "x": "2022-02-01T12:49:00Z",
            "y": 104.572
          },
          {
            "x": "2022-02-01T13:03:00Z",
            "y": 104.56
          },
          {
            "x": "2022-02-01T13:19:00Z",
            "y": 104.593
          }
        ]
      },
      {
        "seriesname": "Bid",
        "showregressionline": "0",
        "data": [
          {
            "x": "2022-02-14T13:47:00Z",
            "y": 102.415
          },
          {
            "x": "2022-02-14T13:47:00Z",
            "y": 102.415
          },
          {
            "x": "2022-02-14T13:47:00Z",
            "y": 102.415
          },
          {
            "x": "2022-02-14T14:17:00Z",
            "y": 102.421
          },
          {
            "x": "2022-02-14T14:17:00Z",
            "y": 102.421
          },
          {
            "x": "2022-02-14T14:17:00Z",
            "y": 102.421
          },
          {
            "x": "2022-02-14T14:47:00Z",
            "y": 102.373
          },
          {
            "x": "2022-02-14T14:47:00Z",
            "y": 102.373
          },
          {
            "x": "2022-02-14T14:47:00Z",
            "y": 102.373
          },
          {
            "x": "2022-02-14T15:17:00Z",
            "y": 102.443
          }
        ]
      }
    ],
    "vtrendlines": []
  }
}

Answer 1

这对我有用，基本上散点图很难直接理解日期对象。为了解决这个问题，我们需要使用融合图表中的一些配置以及时刻库来获得正确的值

首先在 `categories 对象中添加 category 对象。

...
"categories": [{
          "category": [
              {
                  "x": "{{moment('2022-01-20').unix()}}",
                  "label": "2022-01-20",
                  "showverticalline": "0"
              }, ...
           ]
        }]
        ...

请注意，x 键值将对应于数据集中的值。现在我们对数据集也做同样的事情。

...
"dataset": [
        {
          "seriesname": "Offer",
          "showregressionline": "0",
          "data": [
            {
              "x": "{{moment('2022-01-20T13:50:00Z').unix()}}",
              "y": 105.316
            }, ...
          ]
         }
        ], ...

结果是：

My JS object

var x = {
    "type": "scatter",
    "dataSource": {
      "chart": {
        "caption": "Axes",
        "subCaption": "Aggregated History",
        "baseFont": "Helvetica Neue,Arial",
        "xAxisName": "Date",
        "yAxisName": "Price",
        "theme": "fusion"
      },
      "categories": [{
          "category": [
              {
                  "x": "{{moment('2022-01-20').unix()}}",
                  "label": "2022-01-20",
                  "showverticalline": "0"
              },
              {
                  "x": "{{moment('2022-02-01').unix()}}",
                  "label": "2022-02-01",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-02').unix()}}",
                  "label": "2022-02-02",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-03').unix()}}",
                  "label": "2022-02-03",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-04').unix()}}",
                  "label": "2022-02-04",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-05').unix()}}",
                  "label": "2022-02-05",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-06').unix()}}",
                  "label": "2022-02-06",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-07').unix()}}",
                  "label": "2022-02-07",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-08').unix()}}",
                  "label": "2022-02-08",
                  "showverticalline": "1"
              },
              {
                  "x": "{{moment('2022-02-09').unix()}}",
                  "label": "2022-02-09",
                  "showverticalline": "1"
              }
          ]
      }],
      "dataset": [
        {
          "seriesname": "Offer",
          "showregressionline": "0",
          "data": [
            {
              "x": "{{moment('2022-01-20T13:50:00Z').unix()}}",
              "y": 105.316
            },
            {
              "x": "{{moment('2022-02-01T11:16:00Z').unix()}}",
              "y": 104.64
            },
            {
              "x": "{{moment('2022-02-01T11:16:00Z').unix()}}",
              "y": 104.64
            },
            {
              "x": "{{moment('2022-02-01T12:18:00Z').unix()}}",
              "y": 104.599
            },
            {
              "x": "{{moment('2022-02-01T12:18:00Z').unix()}}",
              "y": 104.599
            },
            {
              "x": "{{moment('2022-02-01T12:19:00Z').unix()}}",
              "y": 104.564
            },
            {
              "x": "{{moment('2022-02-01T12:49:00Z').unix()}}",
              "y": 104.608
            },
            {
              "x": "{{moment('2022-02-01T12:49:00Z').unix()}}",
              "y": 104.572
            },
            {
              "x": "{{moment('2022-02-01T13:03:00Z').unix()}}",
              "y": 104.56
            },
            {
              "x": "{{moment('2022-02-01T13:19:00Z').unix()}}",
              "y": 104.593
            }
          ]
        }
      ],
      "vtrendlines": []
    }
  }
  console.log(x)

使用 Appsmith 和自定义融合图表的时间轴格式

Time Axis Format with Appsmith and a Custom Fustion Chart

scatter

fusioncharts

appsmith