Как выровнять фигуры с началом / концом столбца, отображаемого на оси даты? - PullRequest
Новая
       10

Как выровнять фигуры с началом / концом столбца, отображаемого на оси даты?

0 голосов
/ 08 июня 2018

У меня есть гистограмма, отображаемая на оси диапазона дат.

Я хочу обернуть выходные, используя прямоугольную форму.

Однако начало формы отображается всередина бара вместо начала бара. 

const traces = [
  {
    "hoverinfo": "text",
    "name": "Utilisation",
    "orientation": "v",
    "type": "bar",
    "x": [
      "2018-06-01",
      "2018-06-02",
      "2018-06-03",
      "2018-06-04",
      "2018-06-05",
      "2018-06-06",
      "2018-06-07",
      "2018-06-08",
      "2018-06-09",
      "2018-06-10",
      "2018-06-11",
      "2018-06-12",
      "2018-06-13",
      "2018-06-14",
      "2018-06-15"
    ],
    "y": [
      0,
      0,
      0,
      0,
      0,
      2494249.18,
      1560878.67,
      2095468.45,
      1483625.08,
      786367.28,
      426026.17,
      380614.07,
      381928.52,
      95275.78,
      11173.3
    ]
  }
];

const layout = {
  "height": 320,
  "margin": {
    "b": 100,
    "l": 100,
    "pad": 10,
    "r": 50,
    "t": 0
  },
  "shapes": [
    {
      "fillcolor": "#d3d3d3",
      "line": {
        "width": 0
      },
      "opacity": 0.5,
      "type": "rect",
      "x0": "2018-06-02",
      "x1": "2018-06-04",
      "xref": "x",
      "y0": 0,
      "y1": 1,
      "yref": "paper"
    },
    {
      "fillcolor": "#d3d3d3",
      "line": {
        "width": 0
      },
      "opacity": 0.5,
      "type": "rect",
      "x0": "2018-06-09",
      "x1": "2018-06-11",
      "xref": "x",
      "y0": 0,
      "y1": 1,
      "yref": "paper"
    }
  ],
  "showlegend": false,
  "width": 640,
  "xaxis": {
    "dtick": "date",
    "fixedrange": true,
    "title": "Date"
  },
  "yaxis": {
    "fixedrange": true,
    "title": "Estimate ticket revenue"
  }
};

Plotly.plot('myDiv', traces, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Как выровнять фигуры с началом / концом столбца, отображаемым на оси даты?

Красная область в следующемизображение иллюстрирует область, которая должна быть выделена:

enter image description here

1 Ответ

0 голосов
/ 09 июня 2018

Обновление:

Если у вас есть несколько вспомогательных участков, просто настройте свойства shape.Вы можете сделать так, чтобы фигура вмещала столько трасс, сколько вы хотите, используя свойства y0, y1, line.color, line.width. В приведенном ниже примере вы можете видеть, что мы отрегулировали толщину линии (границы фигуры) так, чтобы она перекрывала трассы иустановите цвет линии на тот же цвет, что и цвет заливки фигуры.

Примечание. Я рекомендую это решение, поскольку не смог установить положение отметок xaxisдо left следа (не уверен, есть ли для этого свойство), что было бы идеальным решением! 

const traces = [
  {
    "hoverinfo": "text",
    "name": "Utilisation",
    "orientation": "v",
    "type": "bar",
    "x": [
      "2018-06-01",
      "2018-06-02",
      "2018-06-03",
      "2018-06-04",
      "2018-06-05",
      "2018-06-06",
      "2018-06-07",
      "2018-06-08",
      "2018-06-09",
      "2018-06-10",
      "2018-06-11",
      "2018-06-12",
      "2018-06-13",
      "2018-06-14",
      "2018-06-15"
    ],
    "y": [
      0,
      0,
      0,
      0,
      0,
      2494249.18,
      1560878.67,
      2095468.45,
      1483625.08,
      786367.28,
      426026.17,
      380614.07,
      381928.52,
      95275.78,
      11173.3
    ]
  },{
    "hoverinfo": "text",
    "name": "Utilisation2",
    "orientation": "v",
    "type": "bar",
    "x": [
      "2018-06-01",
      "2018-06-02",
      "2018-06-03",
      "2018-06-04",
      "2018-06-05",
      "2018-06-06",
      "2018-06-07",
      "2018-06-08",
      "2018-06-09",
      "2018-06-10",
      "2018-06-11",
      "2018-06-12",
      "2018-06-13",
      "2018-06-14",
      "2018-06-15"
    ],
    "y": [
      0,
      0,
      0,
      0,
      0,
      2494249.18,
      1560878.67,
      2095468.45,
      1483625.08,
      786367.28,
      426026.17,
      380614.07,
      381928.52,
      95275.78,
      11173.3
    ]
  }
];

const layout = {
  "height": 320,
  "margin": {
    "b": 100,
    "l": 100,
    "pad": 10,
    "r": 50,
    "t": 0
  },
  barmode: "group",
  "shapes": [
    {
      "fillcolor": "#d3d3d3",
      "line": {
        "width": 0
      },
      "opacity": 0.5,
      "type": "rect",
      "x0": "2018-06-02",
      "x1": "2018-06-04",
      "xref": "x",
      "y0": 0.06,
      "y1": 1,
      "line": {
        "color": "#d3d3d3",
        "width": 27
      },
      "yref": "paper"
    },
    {
      "fillcolor": "#d3d3d3",
      "line": {
        "width": 0
      },
      "opacity": 0.5,
      "type": "rect",
      "x0": "2018-06-09",
      "x1": "2018-06-11",
      "xref": "x",
      "y0": 0.06,
      "y1": 1,
      "line": {
        "color": "#d3d3d3",
        "width": 27
      },
      "yref": "paper"
    }
  ],
  "showlegend": false,
  "width": 640,
  "xaxis": {
    "constraintoward": "left",
    "dtick": "date",
    "fixedrange": true,
    "title": "Date"
  },
  "yaxis": {
    "fixedrange": true,
    "title": "Estimate ticket revenue"
  }
};

Plotly.plot('myDiv', traces, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Таким образом, точки появляются в центре каждого бара, поэтому вы получаете эту проблему.

Самое простое решение этой проблемы -чтобы установить свойство ниже для объекта bar.

смещение (число или массив чисел)
Смещение позиции, в которой рисуется полоса (по оси позицииединицы).В режиме «группа», трассы, которые устанавливают «смещение», будут исключены и прорисованы в режиме «наложения».

Таким образом, объект бара будет иметь новое свойство offset как 0,см. приведенный ниже пример и дайте мне знать, если ваша проблема решена полностью! 

const traces = [
  {
    "hoverinfo": "text",
    "name": "Utilisation",
    "orientation": "v",
    "type": "bar",
    "offset": 0,
    "x": [
      "2018-06-01",
      "2018-06-02",
      "2018-06-03",
      "2018-06-04",
      "2018-06-05",
      "2018-06-06",
      "2018-06-07",
      "2018-06-08",
      "2018-06-09",
      "2018-06-10",
      "2018-06-11",
      "2018-06-12",
      "2018-06-13",
      "2018-06-14",
      "2018-06-15"
    ],
    "y": [
      0,
      0,
      0,
      0,
      0,
      2494249.18,
      1560878.67,
      2095468.45,
      1483625.08,
      786367.28,
      426026.17,
      380614.07,
      381928.52,
      95275.78,
      11173.3
    ]
  }
];

const layout = {
  "height": 320,
  "margin": {
    "b": 100,
    "l": 100,
    "pad": 10,
    "r": 50,
    "t": 0
  },
  "shapes": [
    {
      "fillcolor": "#d3d3d3",
      "line": {
        "width": 0
      },
      "opacity": 0.5,
      "type": "rect",
      "x0": "2018-06-02",
      "x1": "2018-06-04",
      "xref": "x",
      "y0": 0,
      "y1": 1,
      "yref": "paper"
    },
    {
      "fillcolor": "#d3d3d3",
      "line": {
        "width": 0
      },
      "opacity": 0.5,
      "type": "rect",
      "x0": "2018-06-09",
      "x1": "2018-06-11",
      "xref": "x",
      "y0": 0,
      "y1": 1,
      "yref": "paper"
    }
  ],
  "showlegend": false,
  "width": 640,
  "xaxis": {
    "dtick": "date",
    "fixedrange": true,
    "title": "Date"
  },
  "yaxis": {
    "fixedrange": true,
    "title": "Estimate ticket revenue"
  }
};

Plotly.plot('myDiv', traces, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Положение стержней также можно настраивать с помощью свойств bargap и bargroupgap для объекта layout.

Справочные материалы:

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

Похожие темы

...