文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >绘图时间序列中的多个X轴

问绘图时间序列中的多个X轴
EN

Stack Overflow用户
提问于 2021-11-07 17:32:46
回答 1查看 44关注 0票数 1

我正在尝试在Plotly.js中创建一个时间序列，它有多个X轴来可视化地对游戏的季度进行分组。所需最终状态的粗略描述：

​

​

我知道Plotly.js支持多个x轴，但我遇到了一些奇怪的行为，其中标签在图形中无法正确呈现。我的尝试基于plotly提供的用于处理多个轴的示例-核心区别是我的数据是基于时间的，而是面向x的：https://plotly.com/javascript/multiple-axes/

这是我的代码和奇怪的行为：

Codepen

代码语言：javascript
复制
data = [
    {
        "x": [
            "2020-01-08 00:00:29",
            "2020-01-08 00:00:40",
            "2020-01-08 00:00:55",
            "2020-01-08 00:01:38",
            "2020-01-08 00:01:52",
            "2020-01-08 00:02:17",
            "2020-01-08 00:02:25",
            "2020-01-08 00:02:41",
            "2020-01-08 00:03:12",
            "2020-01-08 00:03:28",
            "2020-01-08 00:03:59",
            "2020-01-08 00:04:07",
            "2020-01-08 00:04:49",
            "2020-01-08 00:05:06",
            "2020-01-08 00:05:23",
            "2020-01-08 00:06:14",
            "2020-01-08 00:07:53",
            "2020-01-08 00:08:04",
            "2020-01-08 00:09:42",
            "2020-01-08 00:10:04",
            "2020-01-08 00:10:25",
            "2020-01-08 00:11:24"
        ],
        "y": [
            -2,
            1,
            -1,
            -4,
            -2,
            0,
            -2,
            0,
            -1,
            1,
            3,
            1,
            -2,
            0,
            -2,
            -7,
            -7,
            -9,
            -13,
            -16,
            -14,
            -10
        ],
        "mode": "lines",
        "name": "Q1",
        "xaxis": "xaxis"
    },
    {
        "x": [
            "2020-01-08 00:12:42",
            "2020-01-08 00:13:43",
            "2020-01-08 00:14:03",
            "2020-01-08 00:14:37",
            "2020-01-08 00:14:48",
            "2020-01-08 00:16:15",
            "2020-01-08 00:16:31",
            "2020-01-08 00:16:59",
            "2020-01-08 00:17:23",
            "2020-01-08 00:17:55",
            "2020-01-08 00:18:34",
            "2020-01-08 00:19:07",
            "2020-01-08 00:19:38",
            "2020-01-08 00:20:11",
            "2020-01-08 00:21:03",
            "2020-01-08 00:21:23",
            "2020-01-08 00:21:59",
            "2020-01-08 00:22:33",
            "2020-01-08 00:23:43"
        ],
        "y": [
            -8,
            -6,
            -8,
            -10,
            -8,
            -5,
            -8,
            -6,
            -8,
            -6,
            -8,
            -6,
            -4,
            -2,
            -4,
            -6,
            -4,
            -5,
            -4
        ],

        "mode": "lines",
        "name": "Q2",
        "xaxis": "xaxis2"
    },
    {
        "x": [
            "2020-01-08 00:24:41",
            "2020-01-08 00:24:58",
            "2020-01-08 00:25:21",
            "2020-01-08 00:25:46",
            "2020-01-08 00:26:12",
            "2020-01-08 00:26:32",
            "2020-01-08 00:27:19",
            "2020-01-08 00:28:01",
            "2020-01-08 00:28:34",
            "2020-01-08 00:29:08",
            "2020-01-08 00:30:34",
            "2020-01-08 00:31:05",
            "2020-01-08 00:32:02",
            "2020-01-08 00:32:21",
            "2020-01-08 00:32:55",
            "2020-01-08 00:33:42",
            "2020-01-08 00:34:09",
            "2020-01-08 00:34:22",
            "2020-01-08 00:34:58",
            "2020-01-08 00:35:09"
        ],
        "y": [
            -2,
            -4,
            -6,
            -9,
            -12,
            -10,
            -13,
            -10,
            -7,
            -5,
            -5,
            -3,
            -4,
            -6,
            -9,
            -7,
            -9,
            -7,
            -5,
            -7
        ],
        "line": {
            "shape": "linear"
        },
        "mode": "lines",
        "name": "Q3",
        "xaxis": "xaxis3"
    },
    {
        "x": [
            "2020-01-08 00:36:46",
            "2020-01-08 00:37:44",
            "2020-01-08 00:38:23",
            "2020-01-08 00:39:02",
            "2020-01-08 00:40:29",
            "2020-01-08 00:40:59",
            "2020-01-08 00:41:07",
            "2020-01-08 00:41:28",
            "2020-01-08 00:42:00",
            "2020-01-08 00:42:13",
            "2020-01-08 00:42:50",
            "2020-01-08 00:43:29",
            "2020-01-08 00:43:59",
            "2020-01-08 00:44:23",
            "2020-01-08 00:44:53",
            "2020-01-08 00:44:59",
            "2020-01-08 00:45:29",
            "2020-01-08 00:46:14",
            "2020-01-08 00:46:55",
            "2020-01-08 00:47:49",
            "2020-01-08 00:47:57"
        ],
        "y": [
            -9,
            -11,
            -5,
            -8,
            -11,
            -13,
            -10,
            -12,
            -14,
            -12,
            -14,
            -12,
            -10,
            -11,
            -11,
            -10,
            -7,
            -4,
            -1,
            1,
            -1
        ],
        "line": {
            "shape": "linear"
        },
        "mode": "lines",
        "name": "Q4",
        "xaxis": "xaxis4"
    }
]

layout = {
    "title": {
        "text": "Game data"
    },
    "xaxis": {
        "title": {
            "text": "q1"
        },
        "tickvals": [
            "2020-01-08 00:00:00",
            "2020-01-08 00:02:00",
            "2020-01-08 00:04:00",
            "2020-01-08 00:06:00",
            "2020-01-08 00:08:00",
            "2020-01-08 00:12:00"
        ],
        "tickformat": "%M:%S",
        "type": "date",
    },
    "xaxis2": {
        "title": {
            "text": "q2"
        },
        "tickvals": [
            "2020-01-08 00:12:00",
            "2020-01-08 00:14:00",
            "2020-01-08 00:16:00",
            "2020-01-08 00:18:00",
            "2020-01-08 00:20:00",
            "2020-01-08 00:22:00",
            "2020-01-08 00:24:00"
        ],
        "tickformat": "%M:%S",
        "type": "date",
    },
    "xaxis3": {
        "title": {
            "text": "q3"
        },
        "tickvals": [
            "2020-01-08 00:24:00",
            "2020-01-08 00:26:00",
            "2020-01-08 00:28:00",
            "2020-01-08 00:30:00",
            "2020-01-08 00:32:00",
            "2020-01-08 00:34:00",
            "2020-01-08 00:36:00"
        ],
        "tickformat": "%M:%S",
        "type": "date",
    },
    "xaxis4": {
        "title": {
            "text": "q4"
        },
        "tickvals": [
            "2020-01-08 00:36:00",
            "2020-01-08 00:38:00",
            "2020-01-08 00:40:00",
            "2020-01-08 00:42:00",
            "2020-01-08 00:44:00",
            "2020-01-08 00:46:00",
            "2020-01-08 00:48:00"
        ],
        "tickformat": "%M:%S",
        "type": "date",
    },
    "yaxis": {
        "type": "linear",
        "autorange": true
    }
}

Plotly.newPlot('myDiv', data, layout);
plotly
plotly.js
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-08 03:35:34

我不认为多个x轴是你想要的，因为这些通常意味着你在主x轴的不同比例上有另一个x轴，但在你想要的输出中，你只有一个x轴。

相反，您可以使用multi-categorical x-axis，但是我认为您不能将x轴指定为"type": "date"，因为一个类别将是一个日期，而另一个类别将是一个类似"Q1“的字符串。

因此，我认为表示多类别x轴的最好方法是简单地添加字符串"Q1", ... "Q4"作为文本注释，并通过使用图纸坐标定位它们来将它们放在日期标记的下方。

然后使用Plotly shapes，您可以在每个四分之一时间刻度线周围绘制线条，使您的X轴看起来具有多个类别。

您可以查看codepen here。

代码语言：javascript
复制
category_annotations = [];
text_annotations = []
quarter_names = ["Q1","Q2","Q3","Q4"]
quarter_positions = [0.125,0.375,0.625,0.875]
quarter_times = [
  "2020-01-08 00:00:00",
  "2020-01-08 00:12:00",
  "2020-01-08 00:24:00",
  "2020-01-08 00:36:00",
  "2020-01-08 00:48:00"
]

for (let i = 0; i < quarter_times.length; i++) {
  category_annotations.push(
    {
        type: 'line',
        x0: quarter_times[i],
        x1: quarter_times[i],
        y0: -0.20,
        y1: 0.05,
        xref: 'x',
        yref: 'paper',
        line: {
          color: 'black',
          width: 1
        }
    }
  )
}

category_annotations.push(
  {
        type: 'line',
        x0: 0,
        x1: 1,
        y0: 0.05,
        y1: 0.05,
        xref: 'paper',
        yref: 'paper',
        line: {
          color: 'black',
          width: 1
        }
    }
)

for (let i = 0; i < quarter_names.length; i++) {
  text_annotations.push(
    {
      x: quarter_positions[i],
      y: -0.15,
      xref: 'paper',
      yref: 'paper',
      text: quarter_names[i],
      showarrow: false,
    }
  )
}

data = [
    {
        "x": [
            "2020-01-08 00:00:29",
            "2020-01-08 00:00:40",
            "2020-01-08 00:00:55",
            "2020-01-08 00:01:38",
            "2020-01-08 00:01:52",
            "2020-01-08 00:02:17",
            "2020-01-08 00:02:25",
            "2020-01-08 00:02:41",
            "2020-01-08 00:03:12",
            "2020-01-08 00:03:28",
            "2020-01-08 00:03:59",
            "2020-01-08 00:04:07",
            "2020-01-08 00:04:49",
            "2020-01-08 00:05:06",
            "2020-01-08 00:05:23",
            "2020-01-08 00:06:14",
            "2020-01-08 00:07:53",
            "2020-01-08 00:08:04",
            "2020-01-08 00:09:42",
            "2020-01-08 00:10:04",
            "2020-01-08 00:10:25",
            "2020-01-08 00:11:24"
        ],
        "y": [
            -2,
            1,
            -1,
            -4,
            -2,
            0,
            -2,
            0,
            -1,
            1,
            3,
            1,
            -2,
            0,
            -2,
            -7,
            -7,
            -9,
            -13,
            -16,
            -14,
            -10
        ],
        "mode": "lines",
        "name": "Q1",
    },
    {
        "x": [
            "2020-01-08 00:12:42",
            "2020-01-08 00:13:43",
            "2020-01-08 00:14:03",
            "2020-01-08 00:14:37",
            "2020-01-08 00:14:48",
            "2020-01-08 00:16:15",
            "2020-01-08 00:16:31",
            "2020-01-08 00:16:59",
            "2020-01-08 00:17:23",
            "2020-01-08 00:17:55",
            "2020-01-08 00:18:34",
            "2020-01-08 00:19:07",
            "2020-01-08 00:19:38",
            "2020-01-08 00:20:11",
            "2020-01-08 00:21:03",
            "2020-01-08 00:21:23",
            "2020-01-08 00:21:59",
            "2020-01-08 00:22:33",
            "2020-01-08 00:23:43"
        ],
        "y": [
            -8,
            -6,
            -8,
            -10,
            -8,
            -5,
            -8,
            -6,
            -8,
            -6,
            -8,
            -6,
            -4,
            -2,
            -4,
            -6,
            -4,
            -5,
            -4
        ],

        "mode": "lines",
        "name": "Q2",
    },
    {
        "x": [
            "2020-01-08 00:24:41",
            "2020-01-08 00:24:58",
            "2020-01-08 00:25:21",
            "2020-01-08 00:25:46",
            "2020-01-08 00:26:12",
            "2020-01-08 00:26:32",
            "2020-01-08 00:27:19",
            "2020-01-08 00:28:01",
            "2020-01-08 00:28:34",
            "2020-01-08 00:29:08",
            "2020-01-08 00:30:34",
            "2020-01-08 00:31:05",
            "2020-01-08 00:32:02",
            "2020-01-08 00:32:21",
            "2020-01-08 00:32:55",
            "2020-01-08 00:33:42",
            "2020-01-08 00:34:09",
            "2020-01-08 00:34:22",
            "2020-01-08 00:34:58",
            "2020-01-08 00:35:09"
        ],
        "y": [
            -2,
            -4,
            -6,
            -9,
            -12,
            -10,
            -13,
            -10,
            -7,
            -5,
            -5,
            -3,
            -4,
            -6,
            -9,
            -7,
            -9,
            -7,
            -5,
            -7
        ],
        "line": {
            "shape": "linear"
        },
        "mode": "lines",
        "name": "Q3",
    },
    {
        "x": [
            "2020-01-08 00:36:46",
            "2020-01-08 00:37:44",
            "2020-01-08 00:38:23",
            "2020-01-08 00:39:02",
            "2020-01-08 00:40:29",
            "2020-01-08 00:40:59",
            "2020-01-08 00:41:07",
            "2020-01-08 00:41:28",
            "2020-01-08 00:42:00",
            "2020-01-08 00:42:13",
            "2020-01-08 00:42:50",
            "2020-01-08 00:43:29",
            "2020-01-08 00:43:59",
            "2020-01-08 00:44:23",
            "2020-01-08 00:44:53",
            "2020-01-08 00:44:59",
            "2020-01-08 00:45:29",
            "2020-01-08 00:46:14",
            "2020-01-08 00:46:55",
            "2020-01-08 00:47:49",
            "2020-01-08 00:47:57"
        ],
        "y": [
            -9,
            -11,
            -5,
            -8,
            -11,
            -13,
            -10,
            -12,
            -14,
            -12,
            -14,
            -12,
            -10,
            -11,
            -11,
            -10,
            -7,
            -4,
            -1,
            1,
            -1
        ],
        "line": {
            "shape": "linear"
        },
        "mode": "lines",
        "name": "Q4",
    }
];

layout = {
    "title": {
        "text": "Game data"
    },
    "xaxis": {
      "tickformat": "%M:%S",
      "type": "date",
      "tickvals": [
            "2020-01-08 00:00:00",
            "2020-01-08 00:02:00",
            "2020-01-08 00:04:00",
            "2020-01-08 00:06:00",
            "2020-01-08 00:08:00",
            "2020-01-08 00:10:00",
            "2020-01-08 00:12:00",
            "2020-01-08 00:14:00",
            "2020-01-08 00:16:00",
            "2020-01-08 00:18:00",
            "2020-01-08 00:20:00",
            "2020-01-08 00:22:00",
            "2020-01-08 00:24:00",
            "2020-01-08 00:26:00",
            "2020-01-08 00:28:00",
            "2020-01-08 00:30:00",
            "2020-01-08 00:32:00",
            "2020-01-08 00:34:00",
            "2020-01-08 00:36:00",
            "2020-01-08 00:38:00",
            "2020-01-08 00:40:00",
            "2020-01-08 00:42:00",
            "2020-01-08 00:44:00",
            "2020-01-08 00:46:00",
            "2020-01-08 00:48:00"
      ],
    },
    "yaxis": {
        "tickmode": "linear",
        "tick0": -1,
        "dtick": 1.00,
        "zeroline": false
    },
    "annotations": text_annotations,
    "shapes": category_annotations
}

Plotly.newPlot('myDiv', data, layout);

​

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69874927

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档