使用 plotly.js 创建条形图时出现意外标签

Question

基本问题

我正在使用 plotly.js 制作条形图，其中 x 轴代表日期。日期被作为字符串提供给 plotly；当 x 轴上只有 1 个或 2 个元素时，标签与提供给 plotly 的字符串不匹配。

上下文

这是使用 Flask 和 Python3 的网络应用程序的一部分，图表的数据来自 Python 后端；使用 console.log() 语句我已经确认给 plotly 的数组是预期的。

导致我出错的示例代码

x_labels = ["2019-01-14", "2019-01-15"]

y_axis = [11, 6]

var trace = {
    type: 'bar',
    x: x_labels,
    y: y_axis,
}

var data = [trace]

var layout = {
    xaxis: {
        title: 'Date',
    },
    yaxis: {
        title: 'Data'
    }
}

Plotly.newPlot(graph, data, layout, {responsive: true})

JS Fiddle 演示

http://jsfiddle.net/yjk7r4x1/

预期输出

x 轴应该只显示日期，例如 2019 年 1 月 13 日、2019 年 1 月 14 日...等。相反，它显示为 12:00 2019 年 1 月 13 日，0:00 2019 年 1 月 14 日……等等。我假设这些是用来表示时间的，但我不知道时间从哪里来，也不知道为什么要显示它。

Answer 1

定义 X 轴时，您可以修改它以包含 "Type" 并将值设置为 "category"。默认情况下，如果未指定，库会查看数据尝试为您确定类型。您的更改应如下所示：

JFIDDLE: http://jsfiddle.net/xa1uy5dz/

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="incorrect_output" style="width: 100%; height: 500px;"></div>
  <script>


    graph = document.getElementById("incorrect_output");

            x_labels = ["2019-01-14", "2019-01-15"]

            y_axis = [11, 6]

            var trace = {
              type: 'bar',
              x: x_labels,
              y: y_axis,
            }

            var data = [trace]

            var layout = {
              xaxis: {
                title: 'Date',
                type: 'category'
              },
              yaxis: {
                title: 'Data'
              }
            }

            Plotly.newPlot(graph, data, layout, {responsive: true})
  </script>
  <div id="accurate_output" style="width: 100%; height: 500px;"></div>
  <script>
  graph = document.getElementById("accurate_output");

            x_labels = ["2019-01-14", "2019-01-15", "2019-01-16"]

            y_axis = [11, 6, 8]

            var trace = {
              type: 'bar',
              x: x_labels,
              y: y_axis,
            }

            var data = [trace]

            var layout = {
              xaxis: {
                title: 'Date',
                type: 'category'
              },
              yaxis: {
                title: 'Data'
              }
            }

            Plotly.newPlot(graph, data, layout, {responsive: true})
  </script>
</body>

参考信息： https://plot.ly/javascript/reference/#layout-xaxis-type

使用 plotly.js 创建条形图时出现意外标签

Unexpected labels when creating bar graph with plotly.js

javascript

plotly

plotly.js

基本问题

上下文

导致我出错的示例代码

JS Fiddle 演示

预期输出