HighChart 体验之旅 （后台传递JSON参数和数据的方法）

转自：http://www.cnblogs.com/daviddai/archive/2013/04/12/Highchart.html

官网：http://www.highcharts.com/

中文网：http://www.hcharts.cn/

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Import Namespace="DavidHighChartDemo.Models" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    HighChart Demo Gallary
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        HighChart Demo Gallary</h2>
    <%=Html.Label("请选择图标：") %><%=Html.DropDownList("ddlChartType", new List<SelectListItem>() { 
        new SelectListItem() { Text = "混合型", Value=((int)HighchartTypeEnum.混合型).ToString(), Selected=true },
        new SelectListItem() { Text = "饼图型", Value=((int)HighchartTypeEnum.饼图型).ToString() },
        new SelectListItem() { Text = "柱状图", Value=((int)HighchartTypeEnum.柱状图).ToString() },
        new SelectListItem() { Text = "多柱状图", Value=((int)HighchartTypeEnum.多柱状图).ToString() },
        new SelectListItem() { Text = "多流线图", Value=((int)HighchartTypeEnum.多流线图).ToString() },
        new SelectListItem() { Text = "多横柱图", Value=((int)HighchartTypeEnum.多横柱图).ToString() },
        new SelectListItem() { Text = "层叠图", Value=((int)HighchartTypeEnum.层叠图).ToString() },
        new SelectListItem() { Text = "区域图", Value=((int)HighchartTypeEnum.区域图).ToString() },
        new SelectListItem() { Text = "温度计型", Value=((int)HighchartTypeEnum.温度计型).ToString() },
    }, null, new { @onchange = "javascript:chartChangeEvent()" })%>
    <div id="highChartContainer" class="mtop10">
        <label id="highChartLabel"></label>
        <div id="highChartDiv">
        </div>
        <span id="resultInfo" style="margin-left: 20px"></span>
    </div>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            drawChart();
        })

        //初始化图标
        var drawChart = function () {
            $.ajax({
                url: "/DavidTest/GetHighChartOptions",
                type: "post",
                data: { "type": $("#ddlChartType").find("option:selected").val() },
                dataType: "json",
                success: function (data) {
                    $("#highChartLabel").text(data.label);
                    draw(data.value);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

        //change事件
        var chartChangeEvent = function () {
            drawChart();
        }

        //绘图方法
        var draw = function (chartOptions) {
            var chart = new Highcharts.Chart({
                chart: chartOptions.chart,
                title: chartOptions.title,
                subtitle: chartOptions.subtitle,
                credits: chartOptions.credits,
                xAxis: chartOptions.xAxis,
                yAxis: chartOptions.yAxis,
                tooltip: chartOptions.tooltip,
                plotOptions: {
                    pie: {
                        cursor: chartOptions.plotOptions.cursor
                    },
                    spline: {
                        stickyTracking: true
                    },
                    series: {
                        stacking: chartOptions.plotOptions.stacking,
                        point: {
                            events: {
                                mouseOver: function () {
                                    $("#resultInfo").html("Category值：" + this.category + " X值：" + this.x + " Y值：" + this.y);
                                },
                                mouseOut: function () {
                                    $("#resultInfo").empty();
                                }
                            }
                        },
                        marker: {
                            states: {
                                select: {
                                    fillColor: "red",
                                    lineWidth: 0
                                }
                            }
                        }
                    },
                    allowPointSelect: true
                },
                series: chartOptions.series,
                exporting: chartOptions.exporting
            });
        }
    </script>
</asp:Content>

前台