在X轴上实际调整日期

Question

我想知道你怎么能做到以下几点：

• 我使用的是年份和月份的日期格式(即2022-01)，但是Plotly并没有为x轴提供一个简单的日期值，Chart.JS实际上允许您按月定义日期，所以所发生的情况是，如果放大到一个月，那么您可以看到天甚至小时，那么我如何更改它呢？
• 第二，是否有办法控制X轴的显示方式?例如，如果你有一年以上的时间，最好是显示季度，但当你放大一年的时间后，我想看到每个月的显示，但我不想有更多的粒度，我希望只有图表中的月份显示。

https://jsfiddle.net/60ucqz8w/

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);```

Answer 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>

​

有关更多信息，请参见滚动和放大或plotly.js文档。