JqPlot不显示任何内容

JqPlot not displaying anything

本文关键字：任何内 显示 JqPlot      更新时间：2023-09-26

我有一个简单的web应用程序，在eclipse的src文件夹中没有任何东西，我在eclipse的Webcontent文件夹中维护了一个NEwfile.html。我有"插件"文件夹下的webcontent存储我的javascript文件。

这是我的HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org  /TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="chat3" style="height:400px;width:300px; "></div>
<script type="text/javascript" src="plugins/jquery.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
    // Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
          // Put a 30 pixel margin between bars.
barMargin: 30,
          // Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
highlightMouseDown: true   
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}     
});
  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});

</script>

</body>
</html>

你做的一切都是正确的，除了你应该参考jquery 1.9或以上版本和jqplot.css这是一个很好的例子

http://jsfiddle.net/K2dLA/

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<link href="plugins/jqplot/jquery.jqplot.css" rel="stylesheet" />
<div id="chat3" style="height:400px;width:300px; "></div>

$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('chat3', [s1, s2, s3], {
    // Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
          // Put a 30 pixel margin between bars.
barMargin: 30,
          // Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
highlightMouseDown: true   
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}     
});
  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});

change

<div id="plot3" style="height:400px;width:300px; "></div>


<div id="chart3" style="height:400px;width:300px; "></div>
相关文章：