javascript - 如何将形状与日期轴上显示的条形的开头/结尾对齐？

Question

我有一个显示在日期范围轴上的条形图。

我想用矩形包裹周末。

但是，形状的起点出现在条形的中间而不是条形的开头。

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>

如何将形状与出现在日期轴上的条形的开始/结束对齐？

下图中红色区域表示需要高亮显示的区域:

Answer 1

更新:

如果您有多个子图，请调整 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 (number or array of numbers)
Shifts the position where the bar is drawn (in position axis units). In "group" barmode, traces that set "offset" will be excluded and drawn in "overlay" mode instead.

因此 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>

条形图的位置也可以使用 plotly layout 对象下的属性 bargap 和 bargroupgap 进行调整。

引用资料:

1. Plotly Reference