Question

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

不同的日期格式 ：Say Graph需要为2月21日，2月22日，2月23日绘制...一周，周2，第3周，第4周..在同一个X轴上的一年，将有助于。在这种情况下，我需要在加载图表时显示日期，当用户向右滚动时，是否可以显示为周绘制的图表
自定义BG颜色： 我知道plot_bgcolor有助于改变背景颜色。是否可以根据x，y坐标
类型：＆＃39;线+标记物＆＃39;额外日期： 当＆＃39;行+标记＆＃39;使用，x轴是日期。2月3日，2月4日，2月5日，然后图表从2月1日开始到2月7日结束。当它只是＆＃39;行＆＃39; X轴从2月3日开始，到2月5日结束。

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

＆＃13;

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

＆＃13;

<head>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id="myDiv" style="width:100%;height:400px;"></div>

＆＃13;

有人可以解释并帮助我找到这些

Answer 1

唯一可以看到的是使用具有两个不同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轴有不同的布局。每个轴都有自己的range和domain。

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>

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

1 个答案: