Неожиданные метки при создании гистограммы с plotly.js - PullRequest
Новая
       5

Неожиданные метки при создании гистограммы с plotly.js

0 голосов
/ 15 января 2019

Основная проблема

Я делаю гистограмму с помощью plotly.js, где ось X представляет даты. Даты подаются на сюжет в виде строк; когда на оси x есть только 1 или 2 элемента, метки не соответствуют строкам, на которые подается график.

Контекст

Это часть веб-приложения, использующего 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 должны отображаться даты, такие как 13 января 2019 года, 14 января 2019 года ... и т. Д. Вместо этого она отображается как 12:00 13 января 2019 года, 0:00 14 января 2019 года. ... и так далее. Я предполагаю, что они должны представлять время, но я не знаю, откуда приходит время и почему оно отображается.

1 Ответ

0 голосов
/ 15 января 2019

При определении оси 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...