FineUI 官方论坛

标题: FineUI与Chart简单示例 [打印本页]

作者: wanghenan    时间: 2013-10-29 10:36
标题: FineUI与Chart简单示例
本帖最后由 wanghenan 于 2013-10-29 10:43 编辑

没什么技术含量,纯属学习,还是先上图.
[attach]3488[/attach]

HTML代码:
  1. <font size="3" color="#808080"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart.aspx.cs" Inherits="EmptyProjectNet40.Chart" %>

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.     <title></title>
  6.     <style type="text/css">
  7.          .columnpanel
  8.         {
  9.             margin-right: 5px;
  10.         }
  11.         .rowpanel
  12.         {
  13.             margin-bottom: 5px;
  14.         }
  15.     </style>
  16.     <script type="text/javascript" src="Chart.js"></script>
  17. </head>
  18. <body>
  19.     <form id="form1" runat="server">
  20.     <x:PageManager ID="PageManager1" runat="server" />
  21.     <x:Panel ID="Panel10" Height="750px" Width="950px" Layout="HBox" BoxConfigAlign="Stretch"
  22.         BoxConfigPosition="Start" BoxConfigPadding="5" BoxConfigChildMargin="0 5 0 0"
  23.         ShowBorder="true" ShowHeader="true" EnableBackgroundColor="true" runat="server"
  24.         Title="Chart图标示例">
  25.         <Items>
  26.             <x:Panel ID="Panel11" BoxFlex="1" ShowBorder="false" EnableBackgroundColor="true"
  27.                 ShowHeader="false" runat="server">
  28.                 <Items>
  29.                     <x:Panel ID="Panel12" Height="354px" CssClass="rowpanel" runat="server" BodyPadding="5px"
  30.                         ShowBorder="true" ShowHeader="true" Title="图一">
  31.                         <Items>
  32.                             <x:ContentPanel ID="ContentPanel10" runat="server" ShowHeader="false">
  33.                             <canvas id="canvas" height="317" width="466"></canvas>
  34.                             </x:ContentPanel>
  35.                         </Items>
  36.                     </x:Panel>
  37.                     <x:Panel ID="Panel19" Height="354px" runat="server" BodyPadding="5px" ShowBorder="true"
  38.                         ShowHeader="true" Title="图二">
  39.                         <Items>
  40.                            <x:ContentPanel ID="ContentPanel2" runat="server" ShowHeader="false">
  41.                             <canvas id="canvas2" height="317" width="466"></canvas>
  42.                             </x:ContentPanel>
  43.                         </Items>
  44.                     </x:Panel>
  45.                 </Items>
  46.             </x:Panel>
  47.             <x:Panel ID="Panel20" BoxFlex="1" BoxMargin="0" ShowBorder="false" EnableBackgroundColor="true"
  48.                 ShowHeader="false" runat="server">
  49.                 <Items>
  50.                     <x:Panel ID="Panel21" Height="354px" CssClass="rowpanel" runat="server" BodyPadding="5px"
  51.                         ShowBorder="true" ShowHeader="true" Title="图三">
  52.                         <Items>
  53.                             <x:ContentPanel ID="ContentPanel1" runat="server" ShowHeader="false">
  54.                             <canvas id="canvas3" height="317" width="466"></canvas>
  55.                             </x:ContentPanel>
  56.                         </Items>
  57.                     </x:Panel>
  58.                     <x:Panel ID="Panel22" Height="354px" runat="server" BodyPadding="5px" ShowBorder="true"
  59.                         ShowHeader="true" Title="图四">
  60.                         <Items>
  61.                             <x:ContentPanel ID="ContentPanel3" runat="server" ShowHeader="false">
  62.                             <canvas id="canvas4" height="317" width="466"></canvas>
  63.                             </x:ContentPanel>
  64.                         </Items>
  65.                     </x:Panel>
  66.                 </Items>
  67.             </x:Panel>
  68.         </Items>
  69.     </x:Panel>
  70.     </form>
  71.     <script type="text/javascript">
  72.         var barChartData = {
  73.             labels: ["January", "February", "March", "April", "May", "June", "July"],
  74.             datasets: [
  75.                                 {
  76.                                     fillColor: "rgba(220,220,220,0.5)",
  77.                                     strokeColor: "rgba(220,220,220,1)",
  78.                                     data: [65, 59, 90, 81, 56, 55, 40]
  79.                                 },
  80.                                 {
  81.                                     fillColor: "rgba(151,187,205,0.5)",
  82.                                     strokeColor: "rgba(151,187,205,1)",
  83.                                     data: [28, 48, 40, 19, 96, 27, 100]
  84.                                 }
  85.                         ]

  86.         }
  87.         var lineChartData = {
  88.             labels: ["January", "February", "March", "April", "May", "June", "July"],
  89.             datasets: [
  90.                                         {
  91.                                             fillColor: "rgba(220,220,220,0.5)",
  92.                                             strokeColor: "rgba(220,220,220,1)",
  93.                                             pointColor: "rgba(220,220,220,1)",
  94.                                             pointStrokeColor: "#fff",
  95.                                             data: [65, 59, 90, 81, 56, 55, 40]
  96.                                         },
  97.                                         {
  98.                                             fillColor: "rgba(151,187,205,0.5)",
  99.                                             strokeColor: "rgba(151,187,205,1)",
  100.                                             pointColor: "rgba(151,187,205,1)",
  101.                                             pointStrokeColor: "#fff",
  102.                                             data: [28, 48, 40, 19, 96, 27, 100]
  103.                                         }
  104.                                 ]

  105.                                     }
  106.                         var pieData = [
  107.                                 {
  108.                                     value: 30,
  109.                                     color: "#F38630"
  110.                                 },
  111.                                 {
  112.                                     value: 50,
  113.                                     color: "#E0E4CC"
  114.                                 },
  115.                                 {
  116.                                     value: 100,
  117.                                     color: "#69D2E7"
  118.                                 }

  119.                         ];
  120.                                 var chartData = [
  121.                         {
  122.                             value: Math.random(),
  123.                             color: "#D97041"
  124.                         },
  125.                         {
  126.                             value: Math.random(),
  127.                             color: "#C7604C"
  128.                         },
  129.                         {
  130.                             value: Math.random(),
  131.                             color: "#21323D"
  132.                         },
  133.                         {
  134.                             value: Math.random(),
  135.                             color: "#9D9B7F"
  136.                         },
  137.                         {
  138.                             value: Math.random(),
  139.                             color: "#7D4F6D"
  140.                         },
  141.                         {
  142.                             value: Math.random(),
  143.                             color: "#584A5E"
  144.                         }
  145.                 ];
  146.         function onReady() {
  147.             var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
  148.             var myLine = new Chart(document.getElementById("canvas2").getContext("2d")).Line(lineChartData);
  149.             var myPie = new Chart(document.getElementById("canvas3").getContext("2d")).Pie(pieData);
  150.             var myPolarArea = new Chart(document.getElementById("canvas4").getContext("2d")).PolarArea(chartData);
  151.         }
  152.     </script>
  153. </body>
  154. </html></font>
复制代码

Chart.js官方地址:http://www.bootcss.com/p/chart.js/


作者: leetle    时间: 2013-10-29 10:45
代码量过大
作者: cyf4    时间: 2013-10-29 18:17
不错,我用highchart
作者: 11224011lsy    时间: 2014-3-18 15:01
如何把数据定义为数据库里的某个值?比如将数据库中同一个月的值统计后显示到图表中?




欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4