Plotly.js ticktext / tickvals不显示xaxis标签

Question

我一直在尝试利用plotlyjs的tickvals / ticktext能够在xaxis的图形上显示重复的值。它在分离数据方面起作用（在x轴上有多个重复值，但是在1：1数据点上）-我遇到的问题是，没有为刻度线显示xaxis刻度线或xaxis标签。

这是我的问题的代码笔： https://codepen.io/hiquetj/pen/yLeBNjJ

以下是便于阅读的代码：

var trace1 = {
  y: [1323,1070,849,1312,1214,1264,680,2006,1625,0,1199,1770,1880,708,603,649,1384,732,2312,92,1377,1125,1219,1757,1207,2397,1190,1818,2846,1200,1685,1563,1203,1059,820,4303,812,3640,1924,4185,1269,2263,1140,1210,1638,1362,4915,1594,683,1222],
  mode: 'markers'
};

var trace2 = {
  y: [5870,1574,1372,2093,1361,1388,615,1927,947,,1040,,,638,546,542,1051,637,4161,289,1103,0,1308,1658,1340,2198,1245,1568,2392,1297,1583,1281,1282,697,482,3633,653,3233,2096,3815,1401,2116,867,1232,1420,1010,4091,478,208,1262],
  mode: 'lines'
};

var trace3 = {
  y: [1141,1324,424,668,414,407,494,1763,1100,,522,360,108,474,145,621,689,234,154,40,303,364,407,1133,347,1527,358,1745,1223,345,1131,1024,365,754,614,1894,287,5332,363,568,335,1545,1294,383,1255,1107,2090,612,66,390],
  mode: 'lines+markers'
};

var data = [ trace1, trace2, trace3 ];

var layout = {
  xaxis: {
    ticktext: [24346247,24346247,24346247,24346247,24332892,24332892,24332892,24332670,24332670,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24316962,24316962,24316962,24290013,24290013,24290013,24290013,24290013,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933],
    tickvals: [24346247,24346247,24346247,24346247,24332892,24332892,24332892,24332670,24332670,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24330025,24316962,24316962,24316962,24290013,24290013,24290013,24290013,24290013,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933,23738933],
  },
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

x轴标签未通过代码笔显示的示例。

Answer 1

如果未为迹线设置x值，则会自动为它们分配0到n之间的x值。因此，只有当tickval数组为<Button theme={{ global: { colors: { darkBackground: { text: 'red' } } } }} primary={true} label='Submit' onClick={() => {}} /> 时，您的ticktexts才会可见，请参见此jsFiddle：https://jsfiddle.net/9okdx4b2/