图形报表,HighCharts
2014-07-04 15:36
423 查看
官网:http://www.hcharts.cn/
1、实现图形报表需要几个js插件.可以去官方下载.
2、我这边还用到了Easyui。这样更美观一点,也是为了显示数据。废话不多说上代码
JS:
展示图:
1、实现图形报表需要几个js插件.可以去官方下载.
2、我这边还用到了Easyui。这样更美观一点,也是为了显示数据。废话不多说上代码
JS:
<script type="text/javascript"> $(function () { $("#bg").datagrid({ data: <%=bg_DataInfo%> }); }); $(function () { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, credits: { enabled: false //屏蔽版权信息 }, //更改HighCharts默认下载图片打印操作,更改成中文 lang: { downloadJPEG:'下载jpeg', downloadPDF:'下载pdf', downloadPNG:'下载PNG', downloadSVG:'下载SVG', printChart:'打印图标', contextButtonTitle:'打印操作' }, title: { text: '购买次数报表' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ type: 'pie', name: ' ', data: [ ['购买一次的用户', <%=YiCi%>], ['购买两次的用户', <%=ErCi%>], ['购买三次次的用户', <%=SanCi%>], ['购买四次的用户', <%=SiCi%>], ['购买五次大于的用户', <%=WuCi%>] ] }] }); }); </script>
<div data-options="region:'north',iconCls:'icon-ok',title:'操作'" style="padding: 4px"> <asp:TextBox CssClass="easyui-datebox" ID="Start_Time" runat="server" Width="100px"></asp:TextBox> <asp:TextBox CssClass="easyui-datebox" ID="End_Time" runat="server" Width="100px"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="搜索" Width="65px" OnClick="btn_Search_Click" /> </div> <div data-options="region:'center'" style="height:800px; padding: 5px;"> <div class="easyui-tabs" data-options="fit:true,tabWidth:112,fit:true"> <div title="用户" id="container"> </div> <div title="数据报表"> <table class="easyui-datagrid" id="bg" data-options="singleSelect:true,collapsible:true,fit:true,fitColumns:true"> <thead> <tr> <th data-options="field:'A',width:80,formatter:OpeartionFormatterFirst">购买一次的用户</th> <th data-options="field:'B',width:80,formatter:OpeartionFormatterFirst1">购买二次的用户</th> <th data-options="field:'C',width:80,formatter:OpeartionFormatterFirst2,align:'right'">购买三次的用户</th> <th data-options="field:'D',width:80,formatter:OpeartionFormatterFirst3,align:'right'">购买四次的用户</th> <th data-options="field:'E',width:80,formatter:OpeartionFormatterFirst4,align:'right'">购买大于5次的用户</th> </tr> </thead> </table> </div> </div> </div>
<script> //增加Checkbox function OpeartionFormatterFirst(value, row, index,number) { return "<a href='aaa.aspx?number=1&type=1'>"+value+"</a>"; } function OpeartionFormatterFirst1(value, row, index,number) { return "<a href='aaa.aspx?number=2&type=1'>"+value+"</a>"; } function OpeartionFormatterFirst2(value, row, index,number) { return "<a href='aaa.aspx?number=3&type=1'>"+value+"</a>"; } function OpeartionFormatterFirst3(value, row, index,number) { return "<a href='aaa.aspx?number=4&type=1'>"+value+"</a>"; } function OpeartionFormatterFirst4(value, row, index,number) { return "<a href='aaa.aspx?number=5&type=1'>"+value+"</a>"; } </script>
展示图:
相关文章推荐
- highcharts做图形报表如何去掉highcharts.com
- Highcharts实现图形报表(我主要实现javaweb开发的图形报表)
- Highcharts实现图形报表(我主要实现javaweb开发的图形报表)
- highcharts做图形报表如何去掉highcharts.com
- Highcharts图形报表工具插件的使用方法
- 2014.05.04 highcharts图形报表使用积累
- highCharts图形报表神器
- HighCharts 图形报表小试
- highcharts做图形报表去掉highcharts.com的版权信息
- Highcharts常用图形报表展示
- highcharts图形报表
- Highcharts 网页图形报表库
- SSH综合项目实战(快递) -- day15 highcharts实现图形报表
- javascript图形报表库(Highcharts)
- JQuery_HighCharts生成图形报表_饼状图(模仿后台传送数据 JSON格式)
- highcharts:根据Y的数值范围,动态改变图形的填充颜色
- C#发现之旅第五讲 图形开发基础篇 - ASP.NET 报表软件
- 使用phantomjs实现highcharts等报表通过邮件发送(本文仅提供完整解决方案和实现思路,完全照搬不去整理代码无法马上得到效果)
- Jqplot图形报表-绘制饼图、柱状图、折线图....
- highcharts(前端报表生成)