PlotlyJS 条形图 X 轴自动调整范围未按预期工作？

Question

这里是我对 PlotlyJS 的一个问题的最小再现，我看不到所有的栏。我认为 X 轴 上的 autorange 可以解决问题。

这是怎么回事，我是不是配置错误了图表？

var data = [ {
    "x" : [ "1.5", "2.5", "3.5", "6.5", "7.5", "8.5", "10.5", "Not Known" ],
    "y" : [ "1.0", "1.0", "2.0", "1.0", "1.0", "2.0", "1.0", "1.0" ],
    "name" : "Double with string \"N/A\" Exposure",
    "type" : "bar",
    "showlegend" : false,
    "visible" : true
  } ];

var layout = {
    "xaxis" : {
      "type" : "category",
      "showticklabels" : true,
      "zeroline" : false,
      "fixedrange" : false,
      "showgrid" : false,
      "autorange" : true,
      "autotick" : true,
      "showline" : false,
      "visible" : true,
      "automargin" : false
    },
    "toResize" : true,
    "showlegend" : true,
  };

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

body {
  width: 100%;
  
  div {
    width: 100%;
  }
}

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Answer 1

这确实很奇怪。在我看来，虽然您为 x 轴设置了 type: "category"，但 plotly 尝试自行确定轴类型或以某种方式无法处理 x 值数组中同时使用的数字和字符串。特别是，在这种情况下，它似乎对 7.5 感到生气。

作为解决方法，您可以在数字类别中添加不间断空格以强制解释为字符串，如 7.5 .

您可能会针对此问题向 plotly 开发人员提交错误。

var data = [ {
    "x" : [ "1.5", "2.5", "3.5", "6.5", "7.5&nbsp;", "8.5", "10.5", "Not Known" ],
    "y" : [ 1.0, 1.0, 2.0, 1.0, 1.0, 2.0, 1.0, 1.0 ],
    "type" : "bar"
  } ];

var layout = {
    "xaxis" : {
      "type" : "category"
    }
};

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

body {
  width: 100%;
  
  div {
    width: 100%;
  }
}

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

PlotlyJS 条形图 X 轴自动调整范围未按预期工作？

PlotlyJS bar chart X axis autorange not working as expected?

javascript

plotly

plotly.js