如何隐藏绘图中的数据空白?
我的数据集可能包含较大的数据空白,我想绘制数据图表,而不是自动用空白空间填充空白.
I have datasets that may include large gaps in data, and I want to chart the data without plotly automatically filling in the gaps with blank space.
我的应用中的示例图表:
数据:
+------------+-----------+------------+
| 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
我怎样才能做到这一点?
How can I achieve this?
澄清一下,我并不是想用线条或条形来填补空白.我根本不希望差距存在.
To clarify, I am not trying to fill in the gap with a line or bar. I don't want the gap to exist at all.
推荐答案
在你的配置中使用它.
connectgaps: true
我实际上是通过查看这个库的 python 版本来尝试的.
I actually tried this out by viewing the python version of this library.
Plotly :: Python Docs :: 折线图 :: 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 轴视为类别轴.
I guess the best way to approach this it to treat the x-axis like a category axis.
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>
相关文章