js:

<script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/highcharts.js"></script>
    <script src="Scripts/json2.js"></script>
    <script type="text/javascript" >
        $().ready(function () {
           
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Monthly Average Rainfall'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    categories: [
                        'Jan',
                        'Feb',
                        'Mar',
                        'Apr',
                        'May',
                        'Jun',
                        'Jul',
                        'Aug',
                        'Sep',
                        'Oct',
                        'Nov',
                        'Dec'
                    ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: getData()
            });
 
        function getData() {
            var retvalue;
            $.ajax({
                url: 'Test.aspx/getData',
                data: [],
                dataType: 'json',
                type: 'POST',
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    retvalue = eval( data.d);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    var errorData = JSON.parse(xhr.responseText);
                    $.each(errorData, function (key, value) {
                        if (key == 'Message') {
                            alert(value);
                            retvalue = "0";
                        }
                    });
                }
            })
            return retvalue;
        }
   });
    </script>

c#:

public partial class Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
 
    [WebMethod]
    public static string getData()
    {
        string l_str = "";
        List<CMyitem> l_list = new List<CMyitem> ();
        List<Int32> l_listData = new List<Int32>();
        for (int i = 0; i < 12; i++)
        {
            int l_temp =i* new Random().Next(5);
            l_listData.Add(l_temp);
        }
        CMyitem l_A客戶 = new CMyitem();
        l_A客戶.name = "A客戶";
        l_A客戶.data = l_listData;
        l_list.Add(l_A客戶);
        CMyitem l_b客戶 = new CMyitem();
        l_b客戶.name = "B客戶";
        l_b客戶.data = l_listData;
        l_list.Add(l_b客戶);
        JavaScriptSerializer l_JS = new  JavaScriptSerializer();
        l_str = l_JS.Serialize(l_list);
        return l_str;
    }
 
 
}
public class CMyitem
{
    public string name { get; set; }
    public List<Int32> data { get; set; }
}
 

final:

bar  

arrow
arrow
    全站熱搜

    Ryan 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄