highchart 报表及 单击事件
2013-04-26 23:11
507 查看
一、引入包名、载入容器、绑定数据
显示效果
<script src="../lib/jquery/jquery-1.8.1.min.js" type="text/javascript"></script> <script src="../lib/Highcharts/js/highcharts.js" type="text/javascript"></script>
<div id="container" style="min-width: 800px; height: 400px; margin: 0 2em;" runat="server"> </div> <script type="text/JavaScript"> $(function() { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ //00 chart: { renderTo: 'container', type: 'column', margin: [50, 50, 100, 80] }, title: { text: '企业统计图表' }, subtitle: { text: '(<%=title %>)', x: 0 }, xAxis: { categories: <%=x %>, labels: { rotation: -45, align: 'right', style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: '<%=title %>' } }, legend: { enabled: false }, tooltip: { formatter: function() { return '<b>' + this.x + '</b><br/>' + '<%=title %>: ' + Highcharts.numberFormat(this.y, 0); } }, exporting: { enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示 }, plotOptions: { series: { cursor: 'pointer', events: { click: function(e) { var s = e.point; alert(e.point.category); } } } }, series: [{ name: '<%=title %>', data: [<%=y %>], dataLabels: { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', x: 0, y: 0, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }] //11 }); }); }); </script> using System.Text;//引入命名空间 public partial class Test_Default : System.Web.UI.Page { public string title = "测试"; public StringBuilder xData = null; public StringBuilder yData = null; public string x = null, y = null; protected void Page_Load(object sender, EventArgs e) { InitData(); } public void InitData() { xData = new StringBuilder(); xData.Append("["); xData.Append("'语文','数学','英语','理综'"); xData.Append("]"); yData = new StringBuilder(); yData.Append("1,3,5,7"); x = xData.ToString(); y = yData.ToString(); } }
显示效果
相关文章推荐
- 基于MPAndroidChart的自定义LineChart(二)----添加单击事件的处理
- 图形化报表之Highchart报表
- highchart图表drilldown钻取功能及event点击事件添加(1)
- Highchart图形报表
- highchart添加事件
- highchart图表drilldown钻取功能及event点击事件添加--补充钻取多图显示(2)
- HighChart报表之饼图
- mfc 利用CXTPChartControl画柱状图,响应柱状图单击事件
- Android的按钮单击事件及监听器的实现方式
- windows moible DataGrid的滚动条单击事件
- vue 多个input type = radio单击事件
- Android - ListActivity 单击事件的响应
- 多按钮单击事件的共用
- java代码实现highchart与数据库数据结合完整案例分析(一)---饼状图
- 鼠标单击和双击中的事件处理
- java代码实现highchart与数据库数据结合完整案例分析(二)---折线图
- highchart使用
- Android中的onTouch()事件如何区分单击事件和滑动事件
- ASP.NET中单击按钮无法触发事件
- jtable 单击双击事件一起加