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

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

不同的日期格式:假设需要绘制“2 月 21 日、2 月 22 日、2 月 23 日……一周、第二周、一周”的图表3，第 4 周 .. 在同一 X 轴上一年， plotly 上会有帮助。在这种情况下，我需要在加载图表时显示日期，并且当用户向右滚动时，是否可以显示按周绘制的图表
自定义背景颜色:我知道plotly的plot_bgcolor有助于更改背景颜色。是否可以根据 x,y 坐标仅更改一半图形的背景颜色
type:'lines+markers' 额外日期: 当使用 'lines+markers' 且 x 轴为日期时..假设 2 月 3 日， 2月4日、2月5日，则图表从2月1日开始，到2月7日结束。当它只是“线”时，X轴从2月3日开始，到2月5日结束。

Here是解释所有三种情况的代码

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', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8', 'Week 9', 'Week 10', 'Week 11', 'Week 12', 'Week 13', 'Week 14', 'Week 15', 'Week 16', 'Week 17', 'Week 18', 'Week 19'],
  y: [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, -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],
  mode: 'lines+markers',
  type: 'scatter',
  name: '2000'
};

var data = [ trace1 ];

var layout = {
  xaxis: {
    type: 'date',
    title: 'January Weather'
  },
  yaxis: {
    title: 'Daily Mean Temperature'
  },
  title:'2000 Toronto January Weather',
	plot_bgcolor: '#c7c7c7'
};

Plotly.plot('myDiv', data, layout);

<head>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id="myDiv" style="width:100%;height:400px;"></div>

有人可以解释一下并帮助我找到这些问题的解决方案

最佳答案

我能看到的唯一可能是使用具有两个不同 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());
}

现在定义一个任意点，直到我们绘制天数，然后我们只显示几周。

var limit_days = 6;

我们使用此限制将原始数据分割为新的 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 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'];
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, -2.7, -17, -11.3, -5.5, -6.5]
var times = [];
var limit_days = 6;
var half_day = 12 * 60 * 60 * 1000;
for (var i = 0; i < dates.length; i += 1) {
  times.push(new Date(dates[i]).getTime());
}

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


var 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]

  },
  yaxis: {
    range: [1.1 * Math.min(...temps), 1.1 * Math.max(...temps)],
    title: 'Daily Mean Temperature'
  },
  title: '2000 Toronto January Weather',
  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 trace1 = {
  x: times.slice(0, limit_days + 1),
  y: temps.slice(0, limit_days + 1),
  mode: 'lines+markers',
  type: 'scatter',
  name: 'days',
  marker: {
    color: 'blue'
  },
  yaxis: 'y',
  xaxis: 'x',
};

var trace2 = {
  x: times.slice(limit_days, times.length),
  y: temps.slice(limit_days, temps.length),
  mode: 'lines',
  type: 'scatter',
  name: 'weeks',
  marker: {
    color: 'red'
  },
  yaxis: 'y',
  xaxis: 'x2',
};

var data = [trace1, trace2]
Plotly.plot('myDiv', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

关于javascript - 使用 Plotly.js 和自定义背景颜色的 X 轴两种不同的日期格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42449162/

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

上一篇：javascript - 如何从不同网站的嵌入网址生成缩略图？

下一篇：javascript - Redux 存储双重嵌套