1. 首頁
  2. 問答
  3. 爲什麼繪圖區域圖不能正確顯示數據？

爲什麼繪圖區域圖不能正確顯示數據？

2017-04-19 146 views
3

數據正確來自beck端，但有時圖形不能正確顯示。爲什麼它有時會發生？我提到this code.爲什麼繪圖區域圖不能正確顯示數據？

圖表的區域未正確填充。我的圖表看起來像這樣一段時間： enter image description here

這裏是我的代碼：

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</head> 
<body> 
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div> 
<script> 
var abc = ['2013-10-04 02:23:00', '2013-10-22 12:23:00', '2013-11-04 20:23:00', '2013-11-020 10:23:00','2013-12-04 15:10:45', '2013-12-26 06:03:00']; 
abc[6]='2014-05-02 20:23:00'; 
var trace1 = { 
x: abc, 
y: [1, 3, 6,9, 4, 5,8], 
    fill: 'tozeroy', 
    fillcolor: 'red', 
    text: server1, 
    hoverinfo: "x+y+text", 
    type: 'scatter', 
    mode:"markers", 
    marker: 
    { 
    size:4, 
    color:"gray" 
    }, 
    uid:"c2e171", 
    dragmode:"turntable" 
}; 
var layout = { 
    margin: { 
    l: 35, 
    r: 40, 
    b: 50, 
    t: 10 
    }, 
    legend: { 
    "orientation": "h" 
    }, 
    xaxis: { 
    showgrid: false, 
    showline: true, 
    ticks: "outside" 
    }, 
    yaxis : { 
    fixedrange: true, 
    showgrid: false, 
    showline: true, 
    ticks: "outside" 
    }, 
    dragmode:false, 
}; 
var data = [trace1]; 
Plotly.newPlot('myDiv', data,layout, {modeBarButtonsToRemove: ['sendDataToCloud','hoverCompareCartesian','zoom2d','pan2d','select2d','lasso2d','autoScale2d','hoverClosestCartesian','toggleSpikelines']}); 

var plotDiv = document.getElementById('myDiv'); 
plotDiv.on('plotly_relayout', 
function(eventdata){ 
    alert('ZOOM!' + '\n\n' + 
     'Event data:' + '\n' + 
     JSON.stringify(eventdata) + '\n\n' + 
     'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' + 
     'x-axis end:' + new Date(eventdata['xaxis.range[1]'])); 
     var xVal = new Date(eventdata['xaxis.range[0]']); 
     var yVal = new Date(eventdata['xaxis.range[1]']); 
}); 

</script> 
</body>

我從後端獲取數據x和y的動態。不要考慮上面的x和y數據。

我得到x和y以下數據來自後端： 日期X 和Y值

{ 
"results": [ 
    { 
    "date": "2017-04-06 11:57:48", 
    "value": 302 
    }, 
    { 
    "date": "2017-04-06 11:58:18", 
    "value": 329 
    }, 
    { 
    "date": "2017-04-06 11:58:48", 
    "value": 344 
    }, 
    { 
    "date": "2017-04-06 11:59:18", 
    "value": 372 
    }, 
    { 
    "date": "2017-04-06 11:59:48", 
    "value": 391 
    }, 
    { 
    "date": "2017-04-06 00:00:18", 
    "value": 428 
    }, 
    { 
    "date": "2017-04-06 00:00:48", 
    "value": 445 
    }, 
    { 
    "date": "2017-04-06 00:01:18", 
    "value": 287 
    }, 
    { 
    "date": "2017-04-06 00:01:48", 
    "value": 302 
    }, 
    { 
    "date": "2017-04-06 00:02:18", 
    "value": 331 
    }, 
    { 
    "date": "2017-04-06 00:02:48", 
    "value": 346 
    }, 
    { 
    "date": "2017-04-06 00:03:18", 
    "value": 374 
    }, 
    { 
    "date": "2017-04-06 00:03:48", 
    "value": 388 
    }, 
    { 
    "date": "2017-04-06 00:04:18", 
    "value": 417 
    }, 
    { 
    "date": "2017-04-06 00:04:48", 
    "value": 433 
    }, 
    { 
    "date": "2017-04-06 00:05:18", 
    "value": 461 
    }, 
    { 
    "date": "2017-04-06 00:05:48", 
    "value": 474 
    }, 
    { 
    "date": "2017-04-06 00:06:18", 
    "value": 316 
    }, 
    { 
    "date": "2017-04-06 00:06:48", 
    "value": 330 
    }, 
    { 
    "date": "2017-04-06 00:07:18", 
    "value": 357 
    }, 
    { 
    "date": "2017-04-06 00:07:48", 
    "value": 374 
    }, 
    { 
    "date": "2017-04-06 00:08:18", 
    "value": 402 
    }, 
    { 
    "date": "2017-04-06 00:08:48", 
    "value": 415 
    }, 
    { 
    "date": "2017-04-06 00:09:18", 
    "value": 443 
    }, 
    { 
    "date": "2017-04-06 00:09:48", 
    "value": 460 
    }, 
    { 
    "date": "2017-04-06 00:10:18", 
    "value": 301 
    }, 
    { 
    "date": "2017-04-06 00:10:48", 
    "value": 314 
    }, 
    { 
    "date": "2017-04-06 00:11:18", 
    "value": 344 
    }, 
    { 
    "date": "2017-04-06 00:11:48", 
    "value": 359 
    }, 
    { 
    "date": "2017-04-06 00:12:18", 
    "value": 385 
    }, 
    { 
    "date": "2017-04-06 00:12:48", 
    "value": 400 
    }, 
    { 
    "date": "2017-04-06 00:13:18", 
    "value": 429 
    }, 
    { 
    "date": "2017-04-06 00:13:48", 
    "value": 444 
    }, 
    { 
    "date": "2017-04-06 00:14:18", 
    "value": 470 
    }, 
    { 
    "date": "2017-04-06 00:14:48", 
    "value": 301 
    }, 
    { 
    "date": "2017-04-06 00:15:18", 
    "value": 331 
    }, 
    { 
    "date": "2017-04-06 00:15:48", 
    "value": 346 
    }, 
    { 
    "date": "2017-04-06 00:16:18", 
    "value": 373 
    }, 
    { 
    "date": "2017-04-06 00:16:48", 
    "value": 425 
    }, 
    { 
    "date": "2017-04-06 00:17:18", 
    "value": 453 
    }, 
    { 
    "date": "2017-04-06 00:17:48", 
    "value": 468 
    }, 
    { 
    "date": "2017-04-06 00:18:18", 
    "value": 307 
    }, 
    { 
    "date": "2017-04-06 00:18:48", 
    "value": 322 
    }, 
    { 
    "date": "2017-04-06 00:19:18", 
    "value": 350 
    }, 
    { 
    "date": "2017-04-06 00:19:48", 
    "value": 365 
    }, 
    { 
    "date": "2017-04-06 00:20:18", 
    "value": 393 
    }, 
    { 
    "date": "2017-04-06 00:20:48", 
    "value": 408 
    }, 
    { 
    "date": "2017-04-06 00:21:18", 
    "value": 436 
    }, 
    { 
    "date": "2017-04-06 00:21:48", 
    "value": 449 
    }, 
    { 
    "date": "2017-04-06 00:22:18", 
    "value": 291 
    }, 
    { 
    "date": "2017-04-06 00:22:48", 
    "value": 306 
    }, 
    { 
    "date": "2017-04-06 00:23:18", 
    "value": 333 
    }, 
    { 
    "date": "2017-04-06 00:23:48", 
    "value": 346 
    }, 
    { 
    "date": "2017-04-06 00:24:18", 
    "value": 375 
    }, 
    { 
    "date": "2017-04-06 00:24:48", 
    "value": 392 
    }, 
    { 
    "date": "2017-04-06 00:25:18", 
    "value": 419 
    }, 
    { 
    "date": "2017-04-06 00:25:48", 
    "value": 434 
    }, 
    { 
    "date": "2017-04-06 00:26:18", 
    "value": 462 
    }, 
    { 
    "date": "2017-04-06 00:26:48", 
    "value": 476 
    }, 
    { 
    "date": "2017-04-06 00:27:18", 
    "value": 317 
    }, 
    { 
    "date": "2017-04-06 00:27:48", 
    "value": 332 
    }, 
    { 
    "date": "2017-04-06 00:28:18", 
    "value": 359 
    }, 
    { 
    "date": "2017-04-06 00:28:48", 
    "value": 374 
    }, 
    { 
    "date": "2017-04-06 00:29:18", 
    "value": 406 
    }, 
    { 
    "date": "2017-04-06 00:29:48", 
    "value": 421 
    }, 
    { 
    "date": "2017-04-06 00:30:18", 
    "value": 449 
    }, 
    { 
    "date": "2017-04-06 00:30:48", 
    "value": 463 
    }, 
    { 
    "date": "2017-04-06 00:31:18", 
    "value": 305 
    }, 
    { 
    "date": "2017-04-06 00:31:48", 
    "value": 319 
    }, 
    { 
    "date": "2017-04-06 00:32:18", 
    "value": 346 
    }, 
    { 
    "date": "2017-04-06 00:32:48", 
    "value": 361 
    }, 
    { 
    "date": "2017-04-06 00:33:18", 
    "value": 389 
    }, 
    { 
    "date": "2017-04-06 00:33:48", 
    "value": 404 
    }, 
    { 
    "date": "2017-04-06 00:34:18", 
    "value": 433 
    }, 
    { 
    "date": "2017-04-06 00:34:48", 
    "value": 447 
    }, 
    { 
    "date": "2017-04-06 00:35:18", 
    "value": 476 
    }, 
    { 
    "date": "2017-04-06 00:35:48", 
    "value": 303 
    }, 
    { 
    "date": "2017-04-06 00:36:18", 
    "value": 331 
    }, 
    { 
    "date": "2017-04-06 00:36:48", 
    "value": 347 
    }, 
    { 
    "date": "2017-04-06 00:37:18", 
    "value": 374 
    }, 
    { 
    "date": "2017-04-06 00:37:48", 
    "value": 389 
    }, 
    { 
    "date": "2017-04-06 00:38:18", 
    "value": 416 
    }, 
    { 
    "date": "2017-04-06 00:38:48", 
    "value": 432 
    }, 
    { 
    "date": "2017-04-06 00:39:18", 
    "value": 461 
    }, 
    { 
    "date": "2017-04-06 00:39:48", 
    "value": 475 
    }, 
    { 
    "date": "2017-04-06 00:40:18", 
    "value": 318 
    }, 
    { 
    "date": "2017-04-06 00:40:48", 
    "value": 332 
    }, 
    { 
    "date": "2017-04-06 00:41:18", 
    "value": 360 
    }, 
    { 
    "date": "2017-04-06 00:41:48", 
    "value": 373 
    }, 
    { 
    "date": "2017-04-06 00:42:18", 
    "value": 403 
    }, 
    { 
    "date": "2017-04-06 00:42:48", 
    "value": 418 
    }, 
    { 
    "date": "2017-04-06 00:43:18", 
    "value": 446 
    }, 
    { 
    "date": "2017-04-06 00:43:48", 
    "value": 459 
    }, 
    { 
    "date": "2017-04-06 00:44:18", 
    "value": 305 
    }, 
    { 
    "date": "2017-04-06 00:44:48", 
    "value": 320 
    }, 
    { 
    "date": "2017-04-06 00:45:18", 
    "value": 347 
    }, 
    { 
    "date": "2017-04-06 00:45:48", 
    "value": 364 
    }, 
    { 
    "date": "2017-04-06 00:46:18", 
    "value": 391 
    }, 
    { 
    "date": "2017-04-06 00:46:48", 
    "value": 444 
    }, 
    { 
    "date": "2017-04-06 00:47:18", 
    "value": 475 
    } 
] 
}

來源

2017-04-19 Anil Jagtap

+0

我不plotly使用，因此使得這一所以它可能（也可能不是）評論導致你的答案。我使用d3獨立版，當我第一次啓動時，當我設置填充行而不是創建區域時，我看到了這樣的圖形。在香草d3中，它類似於一行聲明，var area = d3.area（）。curve（d3.curveMonotoneX）.x .....等。但可以肯定的是，這是d3中填充線的樣子，而不是填充區域。 – Aaron

+0

@Aaron，謝謝你的寶貴迴應。請不要考慮以上x和y值。我一直在這裏瞭解代碼。你能告訴我爲什麼它發生？ –

+0

將d3代碼幫助你嗎？我無法幫助這個情節化的部分。如果你認爲它會有所幫助，我可以把一個快速和骯髒的圖表放在一起，在一個區域和填充線之間切換。 – Aaron

回答

1

似乎在此代碼工作正常。我得到了一個server1沒有定義的錯誤，但它似乎按預期工作。我最初的想法是，你的X軸有些東西沒有了，但是這裏的一切似乎都很好。你使用的是什麼版本的d3？另外，什麼瀏覽器？我在Ubuntu上使用Chrome。

enter image description here

更新：
我加入了更新的數據。日期「2017-04-06 00:44:18」附近有一個逗號缺失，導致解析它的一些問題。我解決了這個問題，但能夠像以前一樣使用相同的代碼來渲染它。新的圖表看起來是這樣的：

enter image description here

我仍然無法重現你的渲染錯誤，但我會看看我是否可以通過保證金打做。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<body> 
 
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div> 
 
<script> 
 

 

 

 

 
var realData = { 
 
"results": [ 
 
    { 
 
    "date": "2017-04-06 11:57:48", 
 
    "value": 302 
 
    }, 
 
    { 
 
    "date": "2017-04-06 11:58:18", 
 
    "value": 329 
 
    }, 
 
    { 
 
    "date": "2017-04-06 11:58:48", 
 
    "value": 344 
 
    }, 
 
    { 
 
    "date": "2017-04-06 11:59:18", 
 
    "value": 372 
 
    }, 
 
    { 
 
    "date": "2017-04-06 11:59:48", 
 
    "value": 391 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:00:18", 
 
    "value": 428 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:00:48", 
 
    "value": 445 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:01:18", 
 
    "value": 287 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:01:48", 
 
    "value": 302 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:02:18", 
 
    "value": 331 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:02:48", 
 
    "value": 346 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:03:18", 
 
    "value": 374 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:03:48", 
 
    "value": 388 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:04:18", 
 
    "value": 417 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:04:48", 
 
    "value": 433 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:05:18", 
 
    "value": 461 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:05:48", 
 
    "value": 474 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:06:18", 
 
    "value": 316 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:06:48", 
 
    "value": 330 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:07:18", 
 
    "value": 357 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:07:48", 
 
    "value": 374 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:08:18", 
 
    "value": 402 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:08:48", 
 
    "value": 415 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:09:18", 
 
    "value": 443 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:09:48", 
 
    "value": 460 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:10:18", 
 
    "value": 301 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:10:48", 
 
    "value": 314 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:11:18", 
 
    "value": 344 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:11:48", 
 
    "value": 359 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:12:18", 
 
    "value": 385 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:12:48", 
 
    "value": 400 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:13:18", 
 
    "value": 429 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:13:48", 
 
    "value": 444 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:14:18", 
 
    "value": 470 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:14:48", 
 
    "value": 301 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:15:18", 
 
    "value": 331 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:15:48", 
 
    "value": 346 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:16:18", 
 
    "value": 373 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:16:48", 
 
    "value": 425 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:17:18", 
 
    "value": 453 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:17:48", 
 
    "value": 468 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:18:18", 
 
    "value": 307 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:18:48", 
 
    "value": 322 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:19:18", 
 
    "value": 350 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:19:48", 
 
    "value": 365 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:20:18", 
 
    "value": 393 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:20:48", 
 
    "value": 408 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:21:18", 
 
    "value": 436 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:21:48", 
 
    "value": 449 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:22:18", 
 
    "value": 291 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:22:48", 
 
    "value": 306 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:23:18", 
 
    "value": 333 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:23:48", 
 
    "value": 346 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:24:18", 
 
    "value": 375 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:24:48", 
 
    "value": 392 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:25:18", 
 
    "value": 419 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:25:48", 
 
    "value": 434 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:26:18", 
 
    "value": 462 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:26:48", 
 
    "value": 476 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:27:18", 
 
    "value": 317 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:27:48", 
 
    "value": 332 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:28:18", 
 
    "value": 359 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:28:48", 
 
    "value": 374 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:29:18", 
 
    "value": 406 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:29:48", 
 
    "value": 421 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:30:18", 
 
    "value": 449 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:30:48", 
 
    "value": 463 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:31:18", 
 
    "value": 305 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:31:48", 
 
    "value": 319 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:32:18", 
 
    "value": 346 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:32:48", 
 
    "value": 361 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:33:18", 
 
    "value": 389 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:33:48", 
 
    "value": 404 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:34:18", 
 
    "value": 433 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:34:48", 
 
    "value": 447 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:35:18", 
 
    "value": 476 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:35:48", 
 
    "value": 303 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:36:18", 
 
    "value": 331 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:36:48", 
 
    "value": 347 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:37:18", 
 
    "value": 374 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:37:48", 
 
    "value": 389 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:38:18", 
 
    "value": 416 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:38:48", 
 
    "value": 432 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:39:18", 
 
    "value": 461 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:39:48", 
 
    "value": 475 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:40:18", 
 
    "value": 318 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:40:48", 
 
    "value": 332 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:41:18", 
 
    "value": 360 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:41:48", 
 
    "value": 373 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:42:18", 
 
    "value": 403 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:42:48", 
 
    "value": 418 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:43:18", 
 
    "value": 446 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:43:48", 
 
    "value": 459 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:44:18", 
 
    "value": 305 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:44:48", 
 
    "value": 320 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:45:18", 
 
    "value": 347 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:45:48", 
 
    "value": 364 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:46:18", 
 
    "value": 391 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:46:48", 
 
    "value": 444 
 
    }, 
 
    { 
 
    "date": "2017-04-06 00:47:18", 
 
    "value": 475 
 
    } 
 
] 
 
} 
 

 
var abc = ['2013-10-04 02:23:00', '2013-10-22 12:23:00', '2013-11-04 20:23:00', '2013-11-020 10:23:00','2013-12-04 15:10:45', '2013-12-26 06:03:00']; 
 
abc[6]='2014-05-02 20:23:00'; 
 

 
var dates = []; 
 
var vals = []; 
 
realData.results.forEach(function(m) { dates.push(m.date); vals.push(m.value);}); 
 

 
var trace1 = { 
 
x: dates, 
 
y: vals, 
 
    fill: 'tozeroy', 
 
    fillcolor: 'red', 
 
    text: "server1", 
 
    hoverinfo: "x+y+text", 
 
    name:"Server 1", 
 
    type: 'scatter', 
 
    mode:"markers", 
 
    marker: 
 
    { 
 
    size:4, 
 
    color:"gray" 
 
    }, 
 
    uid:"c2e171", 
 
    dragmode:"turntable" 
 
}; 
 
var layout = { 
 
    margin: { 
 
    l: 35, 
 
    r: 40, 
 
    b: 50, 
 
    t: 10 
 
    }, 
 
    legend: { 
 
    "orientation": "h" 
 
    }, 
 
    xaxis: { 
 
    showgrid: false, 
 
    showline: true, 
 
    ticks: "outside" 
 
    }, 
 
    yaxis : { 
 
    fixedrange: true, 
 
    showgrid: false, 
 
    showline: true, 
 
    ticks: "outside" 
 
    }, 
 
    dragmode:false, 
 
}; 
 
var data = [trace1]; 
 
Plotly.newPlot('myDiv', data,layout, {modeBarButtonsToRemove: ['sendDataToCloud','hoverCompareCartesian','zoom2d','pan2d','select2d','lasso2d','autoScale2d','hoverClosestCartesian','toggleSpikelines']}); 
 

 
var plotDiv = document.getElementById('myDiv'); 
 
plotDiv.on('plotly_relayout', 
 
function(eventdata){ 
 
    alert('ZOOM!' + '\n\n' + 
 
     'Event data:' + '\n' + 
 
     JSON.stringify(eventdata) + '\n\n' + 
 
     'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' + 
 
     'x-axis end:' + new Date(eventdata['xaxis.range[1]'])); 
 
     var xVal = new Date(eventdata['xaxis.range[0]']); 
 
     var yVal = new Date(eventdata['xaxis.range[1]']); 
 
}); 
 

 
</script> 
 
</body>

來源

2017-04-19 14:58:14 nixkuroi

+0

謝謝你的寶貴迴應。請不要考慮以上x和y值。我一直在這裏瞭解代碼。你能告訴我爲什麼它發生？ –

+0

我在Windows上使用chrome，我正在使用以下內容： <腳本src =「https://cdn.plot.ly/plotly-latest.min.js」> –

+0

如果可能的話，幫我解決這個問題：http://stackoverflow.com/questions/43472453/why-graph-拖後它空白 - 它 –

相關問題

 相關問題