Question

基本问题

我正在使用plotly.js制作条形图，其中x轴表示日期。日期以字符串形式输入。当x轴上只有1个或2个元素时，标签与以图形方式输入的字符串不匹配。

上下文

这是使用Flask和Python3的Web应用程序的一部分，该图的数据来自Python后端；使用console.log（）语句，我已经确认要分配给图的数组是预期的。

导致我出错的示例代码

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小提琴示范

http://jsfiddle.net/yjk7r4x1/

预期产量

x轴应仅显示日期，例如2019年1月13日，2019年1月14日等。相反，它显示为2019年1月13日12：00，2019年1月14日0:00。 ... 等等。我认为这些表示时间，但是我不知道时间从何而来或为什么显示。

Answer 1

定义X轴时，可以对其进行修改以包括“类型”，并将其值设置为“类别”。默认情况下，如果未指定库，则库将查看数据尝试以确定您的类型。更改内容如下：

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创建条形图时出现意外标签

基本问题

上下文

导致我出错的示例代码

JS小提琴示范

预期产量

1 个答案: