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

标签 javascript date plotly lines markers

嗨,我有几个要求,我在plotly.js中找不到答案


不同的日期格式:如果需要在同一X轴上为一周的'Feb 21,Feb 22,Feb 23 ..,第二周,第三周,第四周..绘制图表,将很有帮助。在这种情况下,我需要在加载图表时显示日期,并且当用户向右滚动时,是否可以显示为周绘制的图表
自定义的BG颜色:我知道plotly的plot_bgcolor有助于更改背景颜色。是否可以基于x,y坐标仅更改图表一半的背景颜色
类型:'lines + markers'额外日期:当使用'lines + markers'且x轴为Date时。说2月3日,2月4日,2月5日,则Graph从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轴具有不同的布局。每个轴都有自己的rangedomain

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 - X轴中使用Plotly.js和自定义背景色的两种不同的日期格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42449162/

相关文章:

javascript - 在material-ui v5中,您打算如何覆盖主题组件中不存在的属性样式

ruby-on-rails - 今天和明天的日期类返回相同 - 奇怪而有趣的错误

python - 更改三元图上悬停时的标签

javascript - 我怎么知道当前加载的文件名是什么?

javascript - WinJS:加载数据

javascript - 谷歌浏览器 - context.canvas.width/context.canvas.width 导致 "Blue layer"

java - 从 java.util.Date 到 java.sql.Timestamp 时添加了无法解释的零

java:用可选的月份和日期表示日期

javascript - Plotly.js饼图值格式

python - 带有 csv 输入和 plotly 输出的 networkx 图