在折线图/面积图的左右两侧添加填充

Posted 2023-02-18

【中文标题】在折线图/面积图的左右两侧添加填充

【英文标题】：Add padding on the left and right sides of the line/area chart

【发布时间】：2020-02-23 20:50:18

【问题描述】：

折线图/面积图的左右两边如何添加内边距？

我的图表如下所示：

这就是它的样子（填充/边距部分）：

【参考方案1】：

修改轴范围fig.update_xaxes() 似乎是最好的方法。 如何您进行修改将取决于您的数据大小和类型。这是一个使用日期的示例，其中 x 轴的范围在源数据的开始和结束时增加了一天：

情节1： Adjusted x-axis

代码：

import pandas as pd
import plotly.graph_objects as go

# data
yVals = [3, 2, 3, 5, 2, 6]
days = len(yVals)
dates = pd.date_range('1/1/2020', periods=numdays)

# plotly figure
fig = go.Figure()
fig.add_trace(go.Scatter(x=dates,
                         y=yVals, 
                         fill='tozeroy')
             )

# adjustments
fig.update_xaxes(range=[dates[0]-1,dates[-1]+1])

fig.show()

情节2： Unadjusted x-axis

【讨论】：

谢谢。我正在使用plot.ly/javascript，所以让我看看我是否可以使用 JS 复制相同的内容。

@SilverRingvee 啊...我什至没有注意到python标签的不存在。如果您仍然认为我的建议有帮助，我会保留它。如果没有，我也将其删除。

在不绘制“假”值的情况下，您将如何使用 Y 轴执行此操作？

【参考方案2】：

灵感来自于 vestland 的 answer，但使用 Javascript 完成。

之前

之后

代码

element = document.getElementById('traffic-overview');

data = [
    x: ["2019-09-29", "2019-09-30", "2019-10-01", "2019-10-02", "2019-10-03", "2019-10-04", "2019-10-05", "2019-10-06", "2019-10-07", "2019-10-08", "2019-10-09", "2019-10-10", "2019-10-11", "2019-10-12", "2019-10-13", "2019-10-14", "2019-10-15", "2019-10-16", "2019-10-17", "2019-10-18", "2019-10-19", "2019-10-20", "2019-10-21", "2019-10-22", "2019-10-23", "2019-10-24", "2019-10-25", "2019-10-26", "2019-10-27", "2019-10-28"],
    y: [30, 66, 49, 154, 220, 224, 243, 164, 90, 71, 164, 199, 246, 251, 217, 85, 67, 156, 204, 218, 233, 204, 82, 59, 183, 205, 197, 219, 271, 116],
    fill: 'tozeroy',
    //fillcolor: '#9ed4fd',
    line: 
      color: '#008ffb'
    ,
    //mode: 'lines',
    type: 'scatter'
];

layout = 
    responsive: true,
    margin:  t: 10, b: 30, l: 30, r: 0 ,
    xaxis:  range: ["2019-09-28", "2019-10-29"]  // <-- note this line!
;

Plotly.plot( element, data, layout );

JSFiddle