強大的jQuery圖表套件-Highcharts

2011-01-30

64029
0
jQuery

這幾天遇到一個需求，客戶需要一份統計資料+報表來觀察網站的狀況

並且貼了一份精美的prototype，其中有一張圖類似是：

看到的時候臉都囧了。

對Google真是又愛又恨阿，愛的是它的功能強大，恨的是如果客戶都想要怎麼辦!!

之前大部分報表都是用 ReportViewer 去做出來的，但是說老實話

這東西要客製化跟弄得美美的真的很麻煩 (也許是我學藝不精)

於是，突然想到好久以前曾經看到的一個jQuery套件 - “Highcharts”!!!

這套件真是十分的強大，而且網站文件之精美跟內容之豐富

讓我這個有閱讀文件障礙的人，都能輕易的上手。

(甚至看屬性命名跟開FireBug看一下結構就會改了)

而且只要是非商業性質(Non-commercial)，就可以免費的使用，真是太棒了。

馬上簡單示範一下怎麼用

由於做報表麻煩的還是在於資料的蒐集以及整理，因此這邊示範的是利用ajax

由Server端丟出json型態的資料，餵給chart當作內容。

Server


	public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        //利用Ajax 向Server端要資料
        //因為MVC有限制 GET 時不能丟出Json(需加JsonRequestBehavior.AllowGet)
        //所以方便起見就用 POST 吧。
        [HttpPost]
        public ActionResult GetReportData()
        {
            ReportData data = new ReportData();
            
            //由於資料內容不是此篇重點，因此我就取12筆亂數囉。
            //以下的寫法是在 0~99 隨機取12個不重複的數字，很方便的寫法。
            data.Category1 = Enumerable.Range(0, 100)
                                       .OrderBy(p => Guid.NewGuid())
                                       .Take(12).ToList();
            data.Category2 = Enumerable.Range(0, 100)
                                       .OrderBy(p => Guid.NewGuid())
                                       .Take(12).ToList();

            //用MVC內建的JsonResult丟回資料。
            return Json(data);
        }
    }
    //自訂一個類別，裡面有兩個List<int>的屬性，Category1跟Category2
    //等等出來的報表會有兩條線
    public class ReportData
    {
        public List<int> Category1 { get; set; }
        public List<int> Category2 { get; set; }
    }

.ASPX


	<%--偷懶就直接把JS寫在同一頁上 --%>
    <%--載入jQuery跟Highcharts --%>
    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="/Scripts/highcharts.js" type="text/javascript"></script>
    <script type="text/javascript">
        //下面範例大部分都是COPY官網上的範例
        var chart;
        jQuery(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'areaspline',
                    events: {
                        //圖表載入後執行GetReportData這個Function
                        load: GetReportData
                    }
                },
                title: {
                    text: 'HighCharts 使用 Demo'
                },
                //自訂X軸座標，也可以從Server塞資料進來
                xAxis: {
                    categories: ["一月", "二月", "三月", "四月", "五月"
                                , "六月", "七月", "八月", "九月", "十月"
                                , "十一月", "十二月", ]
                },
                yAxis: {
                    title: {
                        text: '數量'
                    }
                },
                tooltip: {
                    formatter: function () {
                        //這地方有什麼資料可用可以開FireBug來看
                        //也可以從後端傳進來
                        return '類別1:' + this.points[0].y + '<br/>類別2:' + this.points[1].y;

                    },
                    shared: true,
                    crosshairs: true
                },
                //兩份資料，一開始都是空的
                series: [{
                    name: '類別1',
                    data: [],
                    fillOpacity: 0.5
                }, {
                    name: '類別2',
                    data: [],
                    fillOpacity: 0.4
                }]
            });
        });

        function GetReportData() {
            $.ajax({
                url: '<%=Url.Action("GetReportData") %>',
                type: 'POST',
                //成功之後，會收到Server端返回的資料，也就是自訂的型別ReportData
                //有兩個屬性可以用
                success: function (result) {
                    chart.series[0].setData(result.Category1);
                    chart.series[1].setData(result.Category2);
                },
                cache: false
            });

        }
	</script>

<div id="container" class="highcharts-container" style="height:410px; margin: 0 2em; clear:both; min-width: 600px">
</div>

很簡單就完成了一份圖表，來看結果

是不是非常簡單又好看!!

有了這麼好用的套件，就可以多花點時間在處理資料上面，只要資料整理好丟出來

剩下的就靠Highcharts就有美美的報表了。

範例原始檔下載

P.S 我自己的部落格上也用了這個套件做了一張簡單的統計報表，純粹練功用，

有興趣的可以到 http://www.codingroad.com/Report 這一頁來看看。

回首頁