なぜグラフがドラッグされた後に空白になるのですか

Question

複数回ドラッグ（拡大）するとグラフが空白になります。私が参照しましたthis code.

グラフは、High Cahrt line graphのように動作するはずです。ハイチャートでは、4-5回ドラッグするとグラフが停止し、空白のグラフは表示されません。

私はそれを止めたいです。私は空白を望んでいません。私はそれを止める方法を得ていませんでした。複数回をドラッグした後

は次のように来てグラフ化：このようにグラフをドラッグする前に

私のコードは次のとおりです。

<script> 
var server1 = ['server1','server1','server1','server1','server1','server1','server1']; 
var trace1 = { 
x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00', '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'], 
y: [1, 3, 6,9, 4, 5], 
    fill: 'tozeroy', 
    fillcolor: 'red', 
    text: server1, 
    hoverinfo: "x+y+text", 
    name:"Server 1", 
    type: 'scatter', 
    mode:"markers", 
    marker: 
    { 
    size:5, 
    color:"gray" 
    }, 
    uid:"c2e171" 
}; 
var layout = { 
    margin: { 
    l: 20, 
    r: 40, 
    b: 40, 
    t: 10 
    }, 
    legend: { 
    "orientation": "h" 
    }, 
}; 
var data = [trace1]; 
Plotly.newPlot('myDiv', data,layout); 

var plotDiv = document.getElementById('myDiv'); 
</script> 

私を助けてください。私はplotly.jsで新しいです。 ありがとうございます。

Answer 1

あなたが使用しているドラッグは、細かい詳細でデータを見る（ズームイン）ためのフィルタとして機能します。ドラッグするたびに、データのビューが少ないデータポイントにフィルタリングされます。数回ドラッグすると、データに収まる時間よりも短い時間でフィルタ処理が行われ、グラフにはデータが表示されません。チャートをダブルクリックして、元のデータを表示（縮小）してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script type="text/javascript" src="//plot.ly/static/plotlyjs/build/plotlyjs-bundle.63b9876b722c.js"></script> 
 
<div id="myDiv"></div> 
 
<script> 
 

 
var trace1 = { 
 
x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00', '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'], 
 
y: [1, 3, 6,9, 4, 5], 
 
    fill: 'tozeroy', 
 
    fillcolor: 'red', 
 
    text: 'server1', 
 
    hoverinfo: "x+y+text", 
 
    name:"Server 1", 
 
    type: 'scatter', 
 
    mode:"markers", 
 
    marker: 
 
    { 
 
    size:5, 
 
    color:"gray" 
 
    }, 
 
    uid:"c2e171" 
 
}; 
 
var layout = { 
 
    margin: { 
 
    l: 20, 
 
    r: 40, 
 
    b: 40, 
 
    t: 10 
 
    }, 
 
    legend: { 
 
    "orientation": "h" 
 
    }, 
 
}; 
 
var data = [trace1]; 
 
Plotly.newPlot('myDiv', data, layout); 
 

 

 
</script>