highchart 报表及 单击事件

 

   一、引入包名、载入容器、绑定数据

    <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();    }}

显示效果