FLOT 插件 求助

Question

想写一个生成饼状图的代码，但是就是现实不出来呢。求教各位大神看看<!-- 饼状图 -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
 <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(function () {
var data = [
{ label: "风湿用户数",  data: <%=FScount %>},
{ label: "口腔用户数",  data: <%=KQcount %>},
{ label: "眼科用户数",  data: <%=YKcount %>}
           ];
$.plot($("#graph2"), data, 
{ 
grid: {
             hoverable: true,
             clickable: true
         }, //高亮显示每一小块
 
series: {
pie: { 
 innerRadius: 0.1, //里面空白圆的显示百分比
                 show: true,//显示饼状图
             radius: 1,//饼状图向外延伸的半径（只能是0～1，表示百分数；大于1，表示半径实际长）
                  label: { //控制外面显示的百分比标签
                      show: true,//是
                      radius: 1,//控制标签距离圆心的距离（只能是0～1，表示百分数；大于1，表示半径实际长）
      tilt: 0.5,//倾斜角度
formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
},
background: { opacity:1,color:'red' }
}
}
},
legend: {
show: true
}
});
});
</script>

Answer 1

初步看了下代码没问题，不过有几个小问题不知道是否是这些原因导致的<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>第一你加载了2次jquery库，不知道这样会不会有问题 第一个script和最后一个script第二这里我没看见ID为graph2的DIV，并且如果有了的话，你必须设置它的高度和宽度，否则饼图依然不会出来的

Answer 2

<h2>Graph2</h2>
<div id="graph2" class="graph"></div>
<label for="graph2">
</label>是这样的吗

Answer 3

这是完整的代码。没看出问题啊求助大神<!-- 饼状图 -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
 <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(function () {
var data = [
{ label: "风湿用户数",  data: <%=FScount %>},
{ label: "口腔用户数",  data: <%=KQcount %>},
{ label: "眼科用户数",  data: <%=YKcount %>}
           ];
$.plot($("#graph2"), data, 
{
series: {
pie: { 
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: function(label, series){
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
},
background: { opacity: 0.8 }
}
}
},
legend: {
show: false
}
});});</script>
<style type="text/css">
 {
 font-family: sans-serif;
}body
{
padding: 0 1em 1em 1em;
}div.graph
{
width: 400px;
height: 300px;
float: left;
border: 1px dashed gainsboro;
}label
{
display: block;
margin-left: 400px;
padding-left: 1em;
}h2
{
padding-top: 1em;
margin-bottom: 0;
clear: both;
color: #ccc;
}code
{
display: block;
background-color: #eee;
border: 1px dashed #999;
padding: 0.5em;
margin: 0.5em;
color: #666;
font-size: 10pt;
}code b
{
color: black;
}ul
{
font-size: 10pt;
}ul li
{
margin-bottom: 0.5em;
}ul.options li
{
list-style: none;
margin-bottom: 1em;
}ul li i
{
color: #999;
}
</style>
<h2>Graph2</h2>
<div id="graph2" class="graph"></div>
<label for="graph2">
</label><script>
$(function () {
    var d1 = [];
    for (var i = 0; i <= 1; i += 1)
        d1.push([i, <%=YScount%>]);    var d2 = [];
    for (var i = 0; i <= 1; i += 1)
        d2.push([i, <%=BRcount%>]);
    var stack = 0, bars = true, lines = false, steps = false;
    
    function plotWithOptions() {
        $.plot($("#stack"),  [d1,d2], {
            series: {
                stack: stack,
                lines: { show: lines, fill: true, steps: steps },
                bars: { show: bars, barWidth: 0.6 }
            }
        });
    }    plotWithOptions();
    
    $(".stackControls input").click(function (e) {
        e.preventDefault();
        stack = $(this).val() == "With stacking" ? true : null;
        plotWithOptions();
    });
    $(".graphControls input").click(function (e) {
        e.preventDefault();
        bars = $(this).val().indexOf("Bars") != -1;
        lines = $(this).val().indexOf("Lines") != -1;
        steps = $(this).val().indexOf("steps") != -1;
        plotWithOptions();
    });
});
</script>

Answer 4

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>    <script type="text/javascript" src="lib/flot/jquery.1.7.1.js"></script>
    <script type="text/javascript" src="lib/flot/excanvas.compiled.js"></script>
    <script type="text/javascript" src="lib/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="lib/flot/jquery.flot.pie.js"></script>
    <script type="text/javascript">
        $(function () {
            var data = [
{ label: "风湿用户数", data: 1.5 },
{ label: "口腔用户数", data: 1.9 },
{ label: "眼科用户数", data: 1.77 }
           ];
            $.plot($("#graph2"), data,
{
    series: {
        pie: {
            show: true,
            radius: 1,
            label: {
                show: true,
                radius: 1,
                formatter: function (label, series) {
                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                },
                background: { opacity: 0.8 }
            }
        }
    },
    legend: {
        show: false
    }
});        });    </script>
    <h2>
        Graph2</h2>
    <div id="graph2" style="width: 400px; height: 300px">
    </div>
    <label for="graph2">
    </label>
</head>
<body class="frmbase">
</body>
</html>

Answer 5

毫无问题 ，自己对比吧我也不知道你的问题出在哪里。谁数据的问题吗，还是jquery的版本问题，还是其他什么问题，通过调试自己看参数是否正确还有不要加载2次jquery库，虽然不知道这样会不会有问题，但是起码这是不对的