我该如何隐藏数据空白？

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 Docs :: Line Charts :: Connect Data Gaps

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

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

---

编辑

我想接近这个它来治疗x轴像一个类别轴的最佳途径。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="myChart"></div>