为什么情节区域图不能正确显示数据？ [英] Why plotly area graph is not displaying data properly?
本文介绍了为什么情节区域图不能正确显示数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
数据来自beck end，但有时候图表显示不正确。有时为什么会这样？我提到
这是我的代码：
< 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 =myDivstyle =width：480px; height：400px;><！ - 将在此DIV中绘制Plotly图表 - >< / 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：
{
尺寸：4，
颜色：灰色
}，
uid：c2e171，
dragmode：转盘
};
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'，数据，布局，{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'+
'事件数据：' +'\ 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，
价值：329
}，
{
日期：2017-04-06 11:58:48，
值：344
}，
{
日期：2017-04-06 11:59:18，
值：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，
价值：316
}，
{
日期：2017-04-06 00:06:48，
值：330
}，
{
日期：2017-04-06 00:07:18，
值：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：41 5
}，
{
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
}，
{
日期：2017-04-06 00:12:48，
价值：400
}，
{
日期：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，
价值：331
}，
{
日期：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
}，
{
日期：2017-04-06 00:17:18，
价值：453
}，
{
日期：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
}，
{
日期：2017-04-06 00:19:18，
价值：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
}，
{
日期：2017-04-06 00:24:48，
value：392
}，
{
date：2017-04-06 00 ：25：18，
价值：419
}，
{
日期：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
}，
{
日期：2017-04-06 00:27:18，
价值：317
}，
{
日期：2017 -04-06 00:27:48，
value ：332
}，
{
日期：2017-04-06 00:28:18，
价值：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，
价值：361
}，
{
日期：2017-04-06 00:33:18，
价值：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，
值：374
}，
{
日期：2017-04-06 00:37:48，
值：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
}，
{
日期：2017-04-06 00:40:48，
价值：332
}，
{
日期：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，
的价值：444
}，
{
date：2017-04-06 00:47:18，
value：475
}
]
}
解决方案
似乎在这段代码中正常工作。我收到一个错误，没有定义server1，但是否则它似乎按预期工作。我最初的想法是你的x轴出现了问题，但是这里的一切看起来都很好。您使用的是哪个版本的d3？还有什么浏览器？我在Ubuntu上使用Chrome。
更新：
我添加了更新后的数据。日期2017-04-06 00:44:18附近缺少逗号，导致解析它时遇到一些问题。我修复了这个问题，但是能够使用与以前相同的代码渲染它。新图表如下所示：
I我仍然无法重现你的渲染错误，但我会看看我是否可以通过玩保证金来实现。
< script src =https://cdnjs.cloudflare.com /ajax/libs/d3/3.4.11/d3.min.js\"></script><script type =text / javascriptsrc =https://cdn.plot.ly/plotly-latest .min.js>< /脚本><身体GT; < div id =myDivstyle =width：480px; height：400px;><！ - 将在此DIV中绘制Plotly图表 - >< / 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}，{ 日期： 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，val ue：360}，{date：2017-04-06 00:41:48，value：373}，{date：2017-04-06 00:42:18，值：403}，{date：2017-04-06 00:42:48，value：418}，{date：2017-04-06 00:43:18，值：446}，{date：2017-04-06 00:43:48，value：459}，{date：2017-04-06 00:44:18，值：305}，{date：2017-04-06 00:44:48，value：320}，{date：2017-04-06 00:45:18，值：347}，{date：2017-04-06 00:45:48，value：364}，{date：2017-04-06 00:46:18，值：391}，{date：2017-04-06 00:46:48，value：444}，{date：2017-04-06 00:47:18，值：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 ，名称：服务器1，键入：'scatter'，mode：markers，marker：{size：4，color：gray}，uid：c2e171，dragmode：turnntable}; var layout = {margin：{l：35，r：40，b：50，t：10}，图例：{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'+'Ev数据：'+'\ n'+ JSON.stringify（eventdata）+'\ n\ n'+'x轴开始：'+ new Date（eventdata ['xaxis.range [0]']） +'\ n'+'x轴结束：'+新日期（eventdata ['xaxis.range [1]']））; var xVal = new Date（eventdata ['xaxis.range [0]']）; var yVal = new Date（eventdata ['xaxis.range [1]']）;}）;< / script>< / body>
Data is coming from beck end correctly but on graph is not displaying properly sometimes. Why its happening sometimes? I referred this code.
Area of graph not filling properly. My graph is looking like this some time:
Here is my code:
<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>
I'm getting data for x and y dynamically from backend. Don't consider above x and y data.
I'm getting following data for x and y from backend: date for x and value for 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
}
]
}
解决方案
It seems to work fine in this code. I got an error that server1 was not defined, but otherwise it seems to work as expected. My initial thought was that something was off with your x axis, but everything seem to render fine here. What version of d3 are you using? Also, what browser? I'm using Chrome on Ubuntu.
Update:
I added the updated data. There was a missing comma near the date "2017-04-06 00:44:18" that was causing some problems parsing it. I fixed that, but am able to render it all with the same code as before. The new chart looks like this:
I'm still not able to reproduce your rendering error, but I'll see if I can do it by playing with margin.
<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>
这篇关于为什么情节区域图不能正确显示数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
