如何隐藏数据空白？

Question

我有数据集,可能包括数据中的大间隙,我想绘制数据图表,而无需用空格自动填充空白.

我的应用程序的示例图表:

数据:

+------------+-----------+------------+
|    date    | responses | percentage |
+------------+-----------+------------+
| 2017-02-13 |         4 |     0.6296 |
| 2017-02-14 |         1 |     0.7963 |
| 2017-02-15 |         4 |     0.7315 |
| 2017-02-16 |         2 |     0.4213 |
| 2017-03-02 |         1 |     0.8611 |
| 2017-03-03 |         1 |     0.8148 |
| 2017-03-04 |         2 |     0.4444 |
+------------+-----------+------------+

替代示例JSFiddle: https ://jsfiddle.net/4h922ca9/

Plotly Graph Maker示例:https://plot.ly/create/？fid = Douglas.gaskell:3

我怎样才能做到这一点？

编辑:为了澄清,我不是试图用线或条填补空白.我不希望这个差距存在.

Answer 1

在您的配置中使用它。

connectgaps: true

我实际上通过查看这个库的 python 版本来尝试过这一点。

Plotly :: Python 文档 :: 折线图 :: 连接数据差距

connectgaps: true

var rawData = [
  {date: new Date(2017, 01, 10), value: 5},
  {date: new Date(2017, 01, 11), value: 6},
  {date: new Date(2017, 01, 12), value: 8},
  {date: new Date(2017, 01, 13), value: 13},
  {date: new Date(2017, 01, 14), value: null}, //Null to avoid plotting the line over the gap
  {date: new Date(2017, 01, 20), value: 12},
  {date: new Date(2017, 01, 21), value: 14},
  {date: new Date(2017, 01, 22), value: 8},
  {date: new Date(2017, 01, 23), value: 9},
  {date: new Date(2017, 01, 24), value: 11},
  {date: new Date(2017, 01, 25), value: 8},
  {date: new Date(2017, 01, 26), value: 6},
  {date: new Date(2017, 01, 27), value: 7}
];

let trace1 = {
  name: 'values',
  type: 'scatter',
  mode: 'lines+markers',
  x: getData(rawData, 'date'),
  y: getData(rawData, 'value'),
  connectgaps: true             // <-- HERE
}

Plotly.newPlot('myChart', [trace1]);

function getData(input, propName) {
  let output = [];

  for (let i = 0; i < input.length; i++) {
    output.push(input[i][propName]);
  }
  return output;
}

编辑

我想解决这个问题的最佳方法是将 x 轴视为类别轴。

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

var rawData = [
  { date: '2017-02-10', value:  5 },
  { date: '2017-02-11', value:  6 },
  { date: '2017-02-12', value:  8 },
  { date: '2017-02-13', value: 13 },
  { date: '2017-02-20', value: 12 },
  { date: '2017-02-21', value: 14 },
  { date: '2017-02-22', value:  8 },
  { date: '2017-02-23', value:  9 },
  { date: '2017-02-24', value: 11 },
  { date: '2017-02-25', value:  8 },
  { date: '2017-02-26', value:  6 },
  { date: '2017-02-27', value:  7 }
];

let trace1 = {
  name: 'values',
  type: 'scatter',
  mode: 'lines+markers',
  x: getData(rawData, 'date').map((d, i) => i),
  y: getData(rawData, 'value'),
}

let layout = {
  xaxis: {
    title: 'Date',
    tickvals: getData(rawData, 'date').map((d, i) => i).filter(filterEven),
    ticktext: getData(rawData, 'date').map(d => moment(d).format('MMM DD')).filter(filterEven)
  }
}

Plotly.newPlot('myChart', [trace1], layout);

function filterEven(v, i) { return i % 2 === 0; }
function getData(input, prop) { return input.map(v => v[prop]); }