Question

数据来自beck end，但有时候图表显示不正确。有时为什么会这样？我提到this code.

图表区域未正确填充。我的图表看起来像这样：

这是我的代码：

{
 "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
  }
 ]
 }

我从后端动态获取x和y的数据。不要考虑上面的x和y数据。

我从后端获取x和y的数据： x的日期和Y的值

{{1}}

Answer 1

在此代码中似乎工作正常。我收到一个错误，没有定义server1，但是否则它似乎按预期工作。我最初的想法是你的x轴出现了问题，但是这里的一切看起来都很好。您使用的是哪个版本的d3？还有什么浏览器？我在Ubuntu上使用Chrome。

<强>更新
我添加了更新的数据。日期附近有一个丢失的逗号＆＃34; 2017-04-06 00：44：18＆＃34;这导致解析它的一些问题。我修复了这个问题，但是能够使用与以前相同的代码渲染它。新图表如下所示：

我仍然无法重现您的渲染错误，但我会看看是否可以通过玩边距来实现。

＆＃13;

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

＆＃13;

为什么情节区域图不能正确显示数据？

1 个答案: