jqPlot 没有绘制正确的图形
jqPlot not plotting correct graph
我对 jqplot 库很陌生,我正在使用以下代码绘制 jqplot 图,但它没有绘制
$(document).ready(function () {
var cdata = [];
cdata.push([1.1, '01/13/2020 17:16']);
cdata.push([2.9, '01/12/2020 17:16']);
cdata.push([1.2, '01/11/2020 17:16']);
cdata.push([3.6, '01/10/2020 17:16']);
cdata.push([6.7, '01/09/2020 17:16']);
cdata.push([8.8, '01/08/2020 17:16']);
cdata.push([5.5, '01/07/2020 17:16']);
cdata.push([7.4, '01/06/2020 17:16']);
cdata.push([4.3, '01/05/2020 17:16']);
var plot2 = $.jqplot('chart2', cdata, {
// Give the plot a title.
title: 'Graph Monitor',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// Likewise, seriesDefaults specifies default options for all
// series in a plot. Options specified in seriesDefaults or
// axesDefaults can be overridden by individual series or
// axes options.
// Here we turn on smoothing for the line.
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "Date",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Level"
}
}
});
});
fiddle: https://jsfiddle.net/a5fmbyv2/
您有几个小问题需要解决:
您的 xaxes 应该是 Date,但您却放置了 water 值。还
日期应该是标准格式 YYYY-MM-DD(不是必需的,但更好),因此改为
[1.1, '01/13/2020 17:16]
应该写成 ['2020-01-13 17:16', 1.1]
.
您必须使用 renderer: $.jqplot.DateAxisRenderer
作为日期(下面的 link)。
你的数据系列应该用数组括起来,
这意味着你不是 $.jqplot('chart2', cdata, options)
应该放 $.jqplot('chart2', [cdata], options)
.
总计:
var cdata = [];
cdata.push(['2020-01-13 17:16', 1.1]);
cdata.push(['2020-01-12 17:16', 2.9]);
cdata.push(['2020-01-11 17:16', 1.2]);
cdata.push(['2020-01-10 17:16', 3.6]);
cdata.push(['2020-01-09 17:16', 6.7]);
cdata.push(['2020-01-08 17:16', 8.8]);
cdata.push(['2020-01-07 17:16', 5.5]);
cdata.push(['2020-01-06 17:16', 7.4]);
cdata.push(['2020-01-05 17:16', 4.3]);
var plot2 = $.jqplot('chart2', [cdata], {
// Give the plot a title.
title: 'Graph Monitor',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// Likewise, seriesDefaults specifies default options for all
// series in a plot. Options specified in seriesDefaults or
// axesDefaults can be overridden by individual series or
// axes options.
// Here we turn on smoothing for the line.
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d'},
label: "Date",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Water Level"
}
}
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
<div class="wrapper col-12" id="chart2"></div>
您可以找到 jqplot date examples here and all the jqplot CDN libraries here.
对于日期呈现格式,请check this link。
所有内容也在 JSFiddle。
我对 jqplot 库很陌生,我正在使用以下代码绘制 jqplot 图,但它没有绘制
$(document).ready(function () {
var cdata = [];
cdata.push([1.1, '01/13/2020 17:16']);
cdata.push([2.9, '01/12/2020 17:16']);
cdata.push([1.2, '01/11/2020 17:16']);
cdata.push([3.6, '01/10/2020 17:16']);
cdata.push([6.7, '01/09/2020 17:16']);
cdata.push([8.8, '01/08/2020 17:16']);
cdata.push([5.5, '01/07/2020 17:16']);
cdata.push([7.4, '01/06/2020 17:16']);
cdata.push([4.3, '01/05/2020 17:16']);
var plot2 = $.jqplot('chart2', cdata, {
// Give the plot a title.
title: 'Graph Monitor',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// Likewise, seriesDefaults specifies default options for all
// series in a plot. Options specified in seriesDefaults or
// axesDefaults can be overridden by individual series or
// axes options.
// Here we turn on smoothing for the line.
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
label: "Date",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Level"
}
}
});
});
fiddle: https://jsfiddle.net/a5fmbyv2/
您有几个小问题需要解决:
您的 xaxes 应该是 Date,但您却放置了 water 值。还 日期应该是标准格式 YYYY-MM-DD(不是必需的,但更好),因此改为
[1.1, '01/13/2020 17:16]
应该写成['2020-01-13 17:16', 1.1]
.您必须使用
renderer: $.jqplot.DateAxisRenderer
作为日期(下面的 link)。你的数据系列应该用数组括起来, 这意味着你不是
$.jqplot('chart2', cdata, options)
应该放$.jqplot('chart2', [cdata], options)
.
总计:
var cdata = [];
cdata.push(['2020-01-13 17:16', 1.1]);
cdata.push(['2020-01-12 17:16', 2.9]);
cdata.push(['2020-01-11 17:16', 1.2]);
cdata.push(['2020-01-10 17:16', 3.6]);
cdata.push(['2020-01-09 17:16', 6.7]);
cdata.push(['2020-01-08 17:16', 8.8]);
cdata.push(['2020-01-07 17:16', 5.5]);
cdata.push(['2020-01-06 17:16', 7.4]);
cdata.push(['2020-01-05 17:16', 4.3]);
var plot2 = $.jqplot('chart2', [cdata], {
// Give the plot a title.
title: 'Graph Monitor',
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
// Likewise, seriesDefaults specifies default options for all
// series in a plot. Options specified in seriesDefaults or
// axesDefaults can be overridden by individual series or
// axes options.
// Here we turn on smoothing for the line.
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
// An axes object holds options for all axes.
// Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
// Up to 9 y axes are supported.
axes: {
// options for each axis are specified in seperate option objects.
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d'},
label: "Date",
// Turn off "padding". This will allow data point to lie on the
// edges of the grid. Default padding is 1.2 and will keep all
// points inside the bounds of the grid.
pad: 0
},
yaxis: {
label: "Water Level"
}
}
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
<div class="wrapper col-12" id="chart2"></div>
您可以找到 jqplot date examples here and all the jqplot CDN libraries here.
对于日期呈现格式,请check this link。
所有内容也在 JSFiddle。