我用 JqPlot 做了一个馅饼图表, 馅饼图表确实做了, 我的代码如下:
var plot4 = $.jqplot( pie , [[["none",10],["error",20],["click",30],["impression",40]]], {
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{ sliceMargin: 0 }
},
legend:{ show: true }
});
我面临的问题是 当我在《派饼图》上徘徊时 我有一个错误
B.axes[D[0]]._ticks[0] is undefined
在火虫控制台。当我点击任何一块饼图时,我看到一个更奇怪的事件,我点击的切片消失了。
在单击馅饼图表前显示如下:-
"https://i.sstatic.net/Dhtuq.png" alt="原件派图"/>
当我点击棕色区域后, 馅饼变成下面显示的东西, 甚至棕色片也消失了。
"https://i.sstatic.net/3Mxcy.png" alt="没有棕色切片的皮图"/>
请为上述内容提供解决方案 。 我尝试过不同的配置, 但工作方式不同 。 同时让我告诉您, 我使用其他插件, 如此页面上的条纹和光标 。
我在下面提到我的网页的整个源代码,我这样做的地方是:
<!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>jqPlot Demo</title>
<!--[if IE]><script src="./js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="./js/jqplot.dragable.min.js"></script>
<script type="text/javascript" src="./js/jqplot.trendline.min.js"></script>
<script type="text/javascript" src="./js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="./js/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="./js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="./css/jquery.jqplot.min.css"/>
<link rel="stylesheet" href="./css/jqPlot.css"/>
<script>
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var lineGraph=$.jqplot( chart , [[[10, 2],[30,5.12],[50,13.1],[70,33.6],[90,85.9],[11,20.9]]],
{
title: Exponential Line ,
axes:{yaxis:{min:0,max:100},xaxis:{min:0,max:100}},
legend:{
show:true,
location: se ,
xoffset:12,
yoffset:0
},
grid:{
gridLineColor: #F2F2F2 ,
background: #FFFFFF ,
borderWidth:1,
borderColor: #BBBBBB ,
shadow:true,
shadowAmgle:45,
shadowWidth:2,
shadowOffset:2,
shadowDepth:2
},
cursor:{
style: pointer ,
show:false,
showTooltip: true,
followMouse:true,
tooltipOffset:10,
tooltipLocation: se
},
highlighter: {
lineWidthAdjust: 2.5,
sizeAdjust: 5,
showTooltip: true,
tooltipLocation: nw ,
fadeTooltip: true,
tooltipFadeSpeed: "fast",
tooltipOffset: 2,
tooltipAxes: both ,
tooltipSeparator: , ,
useAxesFormatters: true,
tooltipFormatString: %.5P
},
seriesDefaults:{
trendline:{
show:true,
color: #A2D379 ,
lable: trendX ,
lineWidth:2,
shadow:true
},
color: #058DC7 ,
lineWidth:5,
fill:true,
fillAndStroke:true,
fillColor: #E6F4F9
}
});
var plot4 = $.jqplot( pie , [[["none",10],["error",20],["click",30],["impression",40]]], {
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{ sliceMargin: 0 }
},
legend:{ show: true },
cursor: {
show: false
}
});
});
$( document ).ready(function(){
$( .column ).sortable({
connectWith: .column ,
handle: h2 ,
cursor: move ,
placeholder: placeholder ,
forcePlaceholderSize:true,
opacity:0.4,
revert:true
}).disableSelection();
}
);
</script>
</head>
<body>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
<div id="chart" style="width:100%;height:100%;float:left"></div>
</div>
</div>
</div>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
<div id="pie" style="width:100%;height:100%;float:left"></div>
</div>
</div>
</div>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
<div id="chart1" style="width:400px;height:300px;float:left"></div>
</div>
</div>
</div>
<div id="barRender" style="width:400px;height:300px;float:left"></div>
</body>
</html>