我只是想用flotr(一种用于开发各种图表的开源javascript)绘制一个简单的饼图。但我给出的代码只起了一小部分作用。绘制了图表,爆炸特性、水平线和垂直线都很好。但是鼠标跟踪器和图例不起作用。我想我在代码上犯了一些错误。但我无法清除它。请任何人帮我。提前谢谢。
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="flotr.js"></script>
</head>
<body>
<div id="container" style="width:600px;height:300px;" ></div>
<script type="text/javascript">
(function basic_pie(container) {
var
d1 = [[0, 4]],
d2 = [[0, 3]],
d3 = [[0, 1.03]],
d4 = [[0, 3.5]],
graph;
graph = Flotr.draw('container', [
{ data : d1, label : 'Comedy' },
{ data : d2, label : 'Action' },
{ data : d3, label : 'Romance',
pie : {
explode : 50
}
},
{ data : d4, label : 'Drama' }
], {
HtmlText : false,
grid : {
verticalLines : false,
horizontalLines : false
},
xaxis : { showLabels : false },
yaxis : { showLabels : false },
pie : {
show : true,
explode : 6
},
mouse : { track : true },
legend : {
position : 'se',
backgroundColor : '#D2E8FF'
}
});
})(document.getElementById("editor-render-0"));
</script>
</body>
</html>
您可以检查浏览器的类型,使用哪种浏览器?如果是IE,你应该添加
meta http-equiv="X-UA-Compatible" content="IE=edge"
在<head>
段中的第一行,并添加
[if IE]> script type="text/javascript" src="../lib/excanvas.js">script <![endif]
在CCD_ 2中为了兼容性。你应该加一行:
var container = document.getElementById(' container ');
在function basic_pie(container)
的第一行中以容器元素为目标。
(注意:我的一些答案字符串被stackoverflow网站搞砸了。很抱歉)
图例配置中可能有错误,我删除了它,图例显示正确。看看:http://jsfiddle.net/Kpmcn/