jqplot为网站添加图表 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="public/jqPlot/excanvas.js"></script><![endif]-->
    <script src="public/JS/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="public/jqPlot/jquery.jqplot.min.js" type="text/javascript"></script>
    <link href="public/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" />
    <script src="public/jqPlot/plugins/jqplot.pieRenderer.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14], ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]];
            var plot1 = jQuery.jqplot('chart1', [data],
                        {
                            title: '统计饼图',
                            seriesColors: ["#579575", "#d8b83f", "#ff5800", "#0085cc", "#4bb2c5", "#c5b47f", "#EAA228"],
                            series: [{
                                // Make this a pie chart.
                                renderer: jQuery.jqplot.PieRenderer,
                                rendererOptions: {
                                    diameter: 250,//饼图的直径
                                    sliceMargin: 1,//饼的每个部分之间的距离
                                    // Put data labels on the pie slices.
                                    // By default, labels show the percentage of the slice.
                                    showDataLabels: true,
                                    dataLabelNudge: 35,
                                    shadow:false,//为饼的每个部分的边框设置阴影，以突出其立体效果
                                }
                            }],
                            legend: { show: true }
                        }
                      );
        })

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="chart1" style='height:340px; width:500px'></div>

    </div>
    </form>
</body>
</html>

 

posted @ 2013-04-28 17:29  Uoolo  阅读(429)  评论(2)  编辑  收藏  举报