1
我做了使用jqPlot和餅圖並呈現餅圖，我的代碼如下，我面臨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
在螢火蟲控制檯上。當我點擊餅圖的任何一個片段時，我看到一個更奇怪的現象，其中點擊的整個切片消失。
點擊之前餅圖如下所示： -
後，我點擊那個餡餅原來要的東西，如下圖所示，甚至棕片消失的褐色區域。
請提供上述解決方案。我嘗試過不同的配置，但是沒有工作。還讓我告訴你，我正在使用其他插件，如條形圖和光標在這個頁面上。
我有我的整個頁面的源代碼下面提到我這樣做，其中： -
<!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>
即使我得到的錯誤也像往常一樣有一個JavaScript鏈接（如果有一些javaScript文件有問題，或者我們對預期的螢火蟲指向文件不感興趣）。它鏈接到jqplot.cursor.min.js –