Javascript X轴上使用Plotly.js和自定义背景色的两种不同日期格式

您好，我有几个要求，我在plotly.js中找不到答案

不同的日期格式：假设需要为“2月21日、2月22日、2月23日”绘制图表。。一周，第2周，第3周，第4周。。在同一个X轴上工作一年，这将很有帮助。在这种情况下，我需要在加载图形时显示日期，当用户向右滚动时，是否可以显示绘制了数周的图形

自定义背景颜色：我知道plotly的plot\u bgcolor有助于更改背景颜色。是否可以基于x，y坐标仅更改图形一半的背景色

键入：'lines+markers'额外日期：当使用'lines+markers'时，x轴是日期。比如说2月3日、2月4日、2月5日，那么图表从2月1日开始，到2月7日结束。当只有“直线”时，X轴从2月3日开始，到2月5日结束

这段代码解释了这三种情况吗

var trace1={
x:['2000-01-01'，'2000-01-02'，'2000-01-03'，'2000-01-04'，'2000-01-05'，'2000-01-06'，'2000-01-07'，'2000-01-08'，'2000-01-09'，'2000-01-10'，'2000-01-11'，'2000-01-12'，'2000-01-13'，'2000-01-14'，'3周'，'4周'，'5周'，'6周'，'7周'，'8周'，'9周'，'10周'，'11周'，'12周'，'13周'，'14周'，'15周'，'16周'，'“第17周”、“第18周”、“第19周”]，
y:[4.3,8.2,4.1,5.6，-3，-0.2,0.4,4.1,5,4.6，-0.2，-8.5，-9.1，-2.7，-2.7，-17，-11.3，-5.5，-6.5，-16.9，-12，-6.1，-6.6，-7.9，-10.8，-14.8，-11，-4.4，-1.3，-1.1，-1.1]，
模式：“行+标记”，
键入：“散布”，
姓名：‘2000’
};
var数据=[trace1]；
变量布局={
xaxis：{
键入：“日期”，
标题：“一月天气”
},
亚克斯：{
标题：“日平均温度”
},
标题：“2000年多伦多一月天气”，
绘图颜色：“#c7c7c7”
};
Plotly.plot（'myDiv'，数据，布局）；

---

我能看到的唯一可能是使用具有两个不同x轴和一个共享y轴的子地块

首先，我们需要将日期转换为毫秒

var dates = ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-21', '2000-01-28', '2000-02-04', '2000-02-11', '2000-02-18', '2000-02-25'];
for (var i = 0; i < dates.length; i += 1){
    times.push(new Date(dates[i]).getTime());
}

我们使用这个限制将原始数据分割成新的x和y值，并在图形上定义一个发生转换的点

var r = (times[limit_days] - times[0])/(times[times.length - 1] - times[0]);

不同的x轴有不同的布局。每个轴有自己的

范围

和

域

layout = {
  xaxis: {
    title: 'Daily Mean Temperature',
    type: 'date',
    domain: [0, r],
    tickformat: '%b %d',
    range: [times[0] - half_day, times[limit_days]]
  },
  xaxis2: {
    type: 'date',
    title: 'Weakly Mean Temperature',
    domain: [r, 1],
    tickformat: 'Week %U',
    range: [times[limit_days], times[times.length - 1] + half_day]
  }}


trace1 = {
  yaxis: 'y',
  xaxis: 'x',
};   
trace2 = {
  yaxis: 'y',
  xaxis: 'x2',
};

自定义背景通过背景中的形状添加

shapes: [
    {
      type: 'rect',
      layer: 'below',
      x0: 0,
      y0: Math.min(...temps),
      x1: r,
      y1: Math.max(...temps),
      xref: 'paper',
      yref: 'y',
      fillcolor: '#c7c7c7'
    },
    {
      type: 'rect',
      layer: 'below',
      x0:r,
      y0:Math.min(...temps),
      x1:1,
      y1:Math.max(...temps),
      xref:'paper',
      yref:'y',
      fillcolor: '#555555'
    }]

---

var日期=['2000-01-01'、'2000-01-02'、'2000-01-03'、'2000-01-04'、'2000-01-05'、'2000-01-06'、'2000-01-07'、'2000-01-08'、'2000-01-09'、'2000-01-10'、'2000-01-11'、'2000-01-12'、'2000-01-13'、'2000-01-14'、'2000-01-21'、'2000-01-28'、'2000-02-04'、'2000-02-11'、'2000-02-18'、'2000-02-25']；
var temps=[4.3,8.2,4.1,5.6，-3，-0.2,0.3,0.4,4.1,5,4.6，-0.2，-8.5，-9.1，-2.7，-17，-11.3，-5.5，-6.5]
var时间=[]；
风险价值限额_天=6；
var半天=12*60*60*1000；
对于（变量i=0；i

这很有挑战性：）对于问题1：您想正确缩放轴，即第一周到第二周的距离与2000年1月1日到2000年8月1日的距离相同，还是无关紧要？是的。它必须正确缩放。加载图表时，它应该只显示日级图表。一旦向右滚动，图表应该显示周data在X轴上呆了几周非常感谢@Maximillian Peters！我会继续回答任何需要澄清的问题。但是你知道#3的答案吗？当模式为“线+标记”时，X轴与绘图所需的值不同。这是Plotly的功能之一，当你有标记时，你需要一些额外的空间来防止标记被切断f、 行没有这个问题。只需手动设置范围就可以了。

shapes: [
    {
      type: 'rect',
      layer: 'below',
      x0: 0,
      y0: Math.min(...temps),
      x1: r,
      y1: Math.max(...temps),
      xref: 'paper',
      yref: 'y',
      fillcolor: '#c7c7c7'
    },
    {
      type: 'rect',
      layer: 'below',
      x0:r,
      y0:Math.min(...temps),
      x1:1,
      y1:Math.max(...temps),
      xref:'paper',
      yref:'y',
      fillcolor: '#555555'
    }]