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

显示效果