当前位置： 文江博客话题详情

带有Appsmith和自定义粉状图表的时轴格式

发布于 2025-01-20 10:20:41 字数 2886 浏览 3 评论 0原文

我使用自定义融合图表（散点图），并且已经加载了我想要显示的数据。我坚持使用我的数据所需的 x, y 格式。我现在想沿时间轴 (x) 分散数据。数据的导入工作起来就像一个魅力，但轴看起来只是将 x 值用作字符串/整数。有谁知道如何正确地将 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": []
  }
}

常规 Appsmith 折线图

原文

I use a Custom Fusion Chart (Scatter) and I have loaded the data I want to display. I stick to the required x, y format with my data. I would now like to scatter the data along a time axis (x). The import of the data works like a charm, but the axis looks like it just uses the x value as String/Integer. Does anyone have an idea how to properly format the x-axis or the data to be a time axis?

What I also found out that by using regular charts it looks a bit better but the time-stamps do not scale properly across the x-axis (can be seen in the 2nd image).

scattered data

The json for the custom chart:

{
  "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": []
  }
}

Regular Appsmith Line Chart

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

不爱素颜 2025-01-27 10:20:41

这对我有用，基本上，散点图很难直接理解日期对象。为了解决我们将需要使用Fusion图表中的某些配置，以及lib时刻以获取正确的值

，从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
            }, ...
          ]
         }
        ], ...

结果是：

我的JS对象

  var x = {
    “ type”：“散布”，
    “ DataSource”：{
      “图表”： {
        “标题”：“轴”，
        “子幕”：“汇总历史”，
        “ basefont”：“ helvetica neue，arial”，
        “ xaxisname”：“ date”，
        “ yaxisname”：“价格”，
        “主题”：“融合”
      }，，
      “类别”：[{
          “类别”： [
              {
                  “ 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”
              }
          这是给出的
      }]，
      “数据集”：[
        {
          “ seriesname”：“ uply”，
          “ ShowRegressionline”：“ 0”，
          “数据”： [
            {
              “ 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）

This worked for me, Basically the scatter chart is having a hard time understanding the date objects directly. To resolve that we will need to use some configs from the fusion chart and also the moment lib to get the right value

Start with adding the category object in the `categories object.

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

notice that the x key value will correspond to the value in your dataset.
Now we do the same for the dataset as well.

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

the result of this is:
enter image description here

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)

回复 原文
~没有更多了~

关于作者

晚风撩人

暂无简介

文章
评论
24514 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文