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
firebug コンソールで。円グラフのいずれかのスライスをクリックすると、クリックしたスライス全体が消えるという、さらに奇妙な現象が発生します。
クリック前の円グラフは次のようになります。
茶色の領域をクリックすると、パイが以下のようになり、茶色のスライスも消えます。
上記の解決策を提供してください。さまざまな構成を試しましたが、動作しません。また、このページの棒グラフやカーソルなどの他のプラグインを使用していることもお伝えします。
私がこれを行っている私のページのソースコード全体を以下に述べました:-
<!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>