FineUI与Chart简单示例

wanghenan · 发表于 2013-10-29 10:36:20

本帖最后由 wanghenan 于 2013-10-29 10:43 编辑

没什么技术含量,纯属学习,还是先上图.

HTML代码:

<font size="3" color="#808080"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart.aspx.cs" Inherits="EmptyProjectNet40.Chart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.columnpanel
{
margin-right: 5px;
}
.rowpanel
{
margin-bottom: 5px;
}
</style>
<script type="text/javascript" src="Chart.js"></script>
</head>
<body>
<form id="form1" runat="server">
<x:PageManager ID="PageManager1" runat="server" />
<x:Panel ID="Panel10" Height="750px" Width="950px" Layout="HBox" BoxConfigAlign="Stretch"
BoxConfigPosition="Start" BoxConfigPadding="5" BoxConfigChildMargin="0 5 0 0"
ShowBorder="true" ShowHeader="true" EnableBackgroundColor="true" runat="server"
Title="Chart图标示例">
<Items>
<x:Panel ID="Panel11" BoxFlex="1" ShowBorder="false" EnableBackgroundColor="true"
ShowHeader="false" runat="server">
<Items>
<x:Panel ID="Panel12" Height="354px" CssClass="rowpanel" runat="server" BodyPadding="5px"
ShowBorder="true" ShowHeader="true" Title="图一">
<Items>
<x:ContentPanel ID="ContentPanel10" runat="server" ShowHeader="false">
<canvas id="canvas" height="317" width="466"></canvas>
</x:ContentPanel>
</Items>
</x:Panel>
<x:Panel ID="Panel19" Height="354px" runat="server" BodyPadding="5px" ShowBorder="true"
ShowHeader="true" Title="图二">
<Items>
<x:ContentPanel ID="ContentPanel2" runat="server" ShowHeader="false">
<canvas id="canvas2" height="317" width="466"></canvas>
</x:ContentPanel>
</Items>
</x:Panel>
</Items>
</x:Panel>
<x:Panel ID="Panel20" BoxFlex="1" BoxMargin="0" ShowBorder="false" EnableBackgroundColor="true"
ShowHeader="false" runat="server">
<Items>
<x:Panel ID="Panel21" Height="354px" CssClass="rowpanel" runat="server" BodyPadding="5px"
ShowBorder="true" ShowHeader="true" Title="图三">
<Items>
<x:ContentPanel ID="ContentPanel1" runat="server" ShowHeader="false">
<canvas id="canvas3" height="317" width="466"></canvas>
</x:ContentPanel>
</Items>
</x:Panel>
<x:Panel ID="Panel22" Height="354px" runat="server" BodyPadding="5px" ShowBorder="true"
ShowHeader="true" Title="图四">
<Items>
<x:ContentPanel ID="ContentPanel3" runat="server" ShowHeader="false">
<canvas id="canvas4" height="317" width="466"></canvas>
</x:ContentPanel>
</Items>
</x:Panel>
</Items>
</x:Panel>
</Items>
</x:Panel>
</form>
<script type="text/javascript">
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
var pieData = [
{
value: 30,
color: "#F38630"
},
{
value: 50,
color: "#E0E4CC"
},
{
value: 100,
color: "#69D2E7"
}
];
var chartData = [
{
value: Math.random(),
color: "#D97041"
},
{
value: Math.random(),
color: "#C7604C"
},
{
value: Math.random(),
color: "#21323D"
},
{
value: Math.random(),
color: "#9D9B7F"
},
{
value: Math.random(),
color: "#7D4F6D"
},
{
value: Math.random(),
color: "#584A5E"
}
];
function onReady() {
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
var myLine = new Chart(document.getElementById("canvas2").getContext("2d")).Line(lineChartData);
var myPie = new Chart(document.getElementById("canvas3").getContext("2d")).Pie(pieData);
var myPolarArea = new Chart(document.getElementById("canvas4").getContext("2d")).PolarArea(chartData);
}
</script>
</body>
</html></font>

复制代码

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

leetle · 发表于 2013-10-29 10:45:09

代码量过大

cyf4 · 发表于 2013-10-29 18:17:33

不错，我用highchart

11224011lsy · 发表于 2014-3-18 15:01:50

如何把数据定义为数据库里的某个值？比如将数据库中同一个月的值统计后显示到图表中？

		自动登录	找回密码
密码			立即注册

FineUI与Chart简单示例

本帖子中包含更多资源