在 X 轴绘图中调整日期答案

【问题标题】：Adjusting dates in X Axis Plotly在 X 轴绘图中调整日期
【发布时间】：2022-01-12 15:01:51
【问题描述】：

我想知道如何实现以下目标：

我使用的是年份和月份的日期格式（即 2022-01），但 Plotly 没有提供为 x 轴提供简单日期值的选项，Chart.JS 实际上允许您通过以下方式定义日期月，所以发生的情况是，如果你放大到一个月，那么你可以看到几天甚至几小时，那么我该如何改变呢？
其次，有没有办法控制 X 轴的显示方式？例如，也许当你有超过一年的时候最好显示季度，但是当你放大 1 年的时间段时，那么我想看每个月的显示？，但我不想有更多的粒度，我只想在图表中显示月份

var Deals = {
 x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
 y: [11241, 234021, 26544, 28856, 70463, 28856, 155019],
 name: 'Deals',
 type: 'bar',
 marker: {
  color: 'rgb(0,131,117)',
 }
};

var Leads = {
 x: ['2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-11', '2023-01', '2023-02'],
 y: [7255, 5155, 61950, 63000, 5155, 19845, 20905, 5155, 15750],
 name: 'Leads',
 type: 'bar',
 marker: {
  color: 'rgb(160,220,210)',
 }
};

var Cumulative = {
 x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
 y: [11241, 245262, 271806, 300662, 371125, 399981, 555000],
 name: 'Cumulative Deals',
 type: 'line',
 marker: {
  color: 'rgb(0,131,117)',
    }
};

var data = [Deals,Leads,Cumulative];

var layout = {
 title: "Sales Forecast",
 barmode: 'stack',
 xaxis: {
    autorange: true,
    rangeselector: {
  buttons: [{
    step: 'all'
    },
    {
        count: 1, 
      label: 'YTD', 
      step: 'year', 
      stepmode: 'todate'
     },
     {
        count: 6,
      label: '6m',
      step: 'month',
      stepmode: 'todate'
      }]},
      rangeslider: { }, 
      type: 'date', 
      tickfont:{ 
            size: 14 
        }, 
      }, 
      yaxis: {
        tickfont:{size: 14}
        }
      };

Plotly.newPlot('DivBarChart', data,layout);```

【问题讨论】：

标签： javascript plotly plotly.js

【解决方案1】：

您的代码大部分是正确的，唯一需要修复的是scrollZoom: true。除非您输入scrollZoom: true，否则代码将不起作用，因为除非指定，否则该函数将不会处于活动状态。您需要这个，以便您可以为您的图表启用它。您需要使用鼠标选择时间范围。单击并拖动以查看您的时间范围。

var Deals = {
  x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
  y: [11241, 234021, 26544, 28856, 70463, 28856, 155019],
  name: 'Deals',
  type: 'bar',
  marker: {
    color: 'rgb(0,131,117)',

  }
};
var Leads = {
  x: ['2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-11', '2023-01', '2023-02'],
  y: [7255, 5155, 61950, 63000, 5155, 19845, 20905, 5155, 15750],
  name: 'Leads',
  type: 'bar',
  marker: {
    color: 'rgb(160,220,210)',

  }
};

var Cumulative = {
  x: ['2021-10', '2022-01', '2022-03', '2022-04', '2022-05', '2022-07', '2022-09'],
  y: [11241, 245262, 271806, 300662, 371125, 399981, 555000],
  name: 'Cumulative Deals',
  type: 'line',
  marker: {
    color: 'rgb(0,131,117)',
  }

};

var data = [Deals, Leads, Cumulative];

var layout = {
  title: "Sales Forecast",
  barmode: 'stack',
};

Plotly.newPlot('DivBarChart', data, layout, {
  scrollZoom: true
});

<div class="col-sm-4">
  <div id='DivBarChart' class="container"></div>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</div>

请参阅scroll and zoom in 或plotly.js docs 了解更多信息。

【讨论】：