Plotly：创建水平时间线

Question

这就是我目前所拥有的...

Plotly.plot('graph', [{
  type: 'bar',
  y: [1,0,0],
  x: [1,2,1],
  orientation: 'h',
  base: [0,2,5]
}, {
  type: 'bar',
  y: [1,1,1],
  x: [2,1,2],
  orientation: 'h',
  base: [0,3,5]
}])

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

如何在横轴上使用日期而不是数值？

Answer 1

您需要使用 x 轴类型属性。您可以将 x 轴指定为日期类型：喜欢

x:{type:"date"}

我更新了你的例子。请看下面的例子

Plotly.plot('graph', [{
  type: 'bar',
  y: [1,0,0],
  x: ['2000-01-01', '2000-01-02', '2000-01-03'],
  orientation: 'v',
  base: [0,2,5]
}, {
  type: 'bar',
  y: [1,1,1],
  x: ['2000-01-01', '2000-01-02', '2000-01-03'],
  orientation: 'v',
  base: [0,3,5]
}],{xaxis:{type:"date"}})

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

Answer 2

终于创建了时间轴！ Codepen.io link: https://codepen.io/elv1s42/pen/bKVEJb

分享给大家以备不时之需：

var layout = {
  height: 300,
  yaxis: {
    showgrid: false,
    zeroline: false,
    showline: false,
    showticklabels: false
  }
};

Plotly.plot('graph', [{
    x: ['2017-11-04 22:23:00', '2017-11-04 22:24:00'],
    y: [1, 1],
    type: 'scatter', 
    opacity: 0.5,
    line: { color: 'red', width: 20 },
    mode: 'lines',
    name: 'First event'
  },{
    x: ['2017-11-04 22:24:00', '2017-11-04 22:24:30'],
    y: [1, 1],
    type: 'scatter', 
    opacity: 0.5,
    line: { color: 'green', width: 20 },
    mode: 'lines',
    name: 'Second event'
  },{
    x: ['2017-11-04 22:25:00', '2017-11-04 22:26:00'],
    y: [1, 1],
    type: 'scatter', 
    opacity: 0.5,
    line: { color: 'yellow', width: 20 },
    mode: 'lines',
    name: 'Third event'
  }], layout)

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

Plotly：创建水平时间线

Plotly: create horizontal timeline

html

javascript

timeline

plotly