zoukankan      html  css  js  c++  java
  • 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; 500px'></div>
    
        </div>
        </form>
    </body>
    </html>
  • 相关阅读:
    ps插件安装
    CSS3时钟式进度条
    手机web——自适应网页设计(html/css控制)
    7个设计师必备的国际顶尖设计网站
    中​文​字​号​、​磅​和​像​素​对​照​关​系
    图标字体
    用AE如何制作如下三个loading动效,
    u盘装系统
    SpringBoot:Maven创建一个HelloWorld
    eclipse中配置maven和创建第一个 Spring Boot Application
  • 原文地址:https://www.cnblogs.com/wuchao/p/3049687.html
Copyright © 2011-2022 走看看