表徵圖控制項HightChart的使用

標籤：style   blog   http   java   color   使用   

基本的介紹：    

Highcharts是一個非常流行，介面美觀的純Javascript圖表庫。它主要包括兩個部分：Highcharts和Highstock。Highcharts可以為您的網站或Web應用程式提供直觀，互動式的圖表。目前支援線，樣條，面積，areaspline，直條圖，橫條圖，餅圖和散佈圖類型。Highstock可以為您方便地建立股票或一般的時間軸圖表。它包括先進的導航選項，預設的日期範圍，日期選取器，滾動和平移等等。

使用方法：

1. Highcharts使用jQuery等Javascript架構來處理基本的Javascript任務,所以使用時要引用jquery檔案；引用檔案如下：

<!--在jquery的架構下運行--><script src="~/higthchart/jquery.min.js"></script><!--基本的引用--><script src="~/higthchart/highcharts.js"></script><!--圖表右上方是否顯示匯出的菜單--><script src="~/higthchart/exporting.js"></script><!--增加3D、散佈圖等的效果--><script src="~/higthchart/highcharts-3d.js"></script><script src="~/higthchart/highcharts-more.js"></script><!--指訂表格的主題  指定charset="gb2312"  防止漢化菜單會亂碼 --><script charset="gb2312" src="~/higthchart/grid.js"></script>

2.頁面載入時載入資料，代碼如下：

 $(function () { $(‘#pieContainer‘).highcharts({            chart: {                plotBackgroundColor: null,                plotBorderWidth: null,                plotShadow: false            },            title: {                text: ‘2014年各項目人數比例圖‘            },            tooltip: {                pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘            },            plotOptions: {                pie: {                    allowPointSelect: true,                    cursor: ‘pointer‘,                    dataLabels: {                        enabled: true,                        format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘,                        style: {                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black‘                        }                    }                }            },            series: [{                type: ‘pie‘,                name: ‘所佔比例‘,                data: [                    [‘項目1‘, 45.0],                    [‘項目2‘, 26.8],                    {                        name: ‘Chrome‘,                        y: 12.8,                        sliced: true,                        selected: true                    },                    [‘項目3‘, 8.5],                    [‘項目4‘, 6.2],                    [‘項目5‘, 0.7]                ]            }]        });    }

我們在做開發時當然要動態載入資料，可用jquery的ajax方式條背景方法擷取資料，然後再進行綁定即可，如何綁定呢，不急，看下面：

首先初始化一個chart對象，並把其中涉series資料data設定為空白：

  var chart1 = new Highcharts.Chart({            chart: {                renderTo: "pieContainer",                plotBackgroundColor: null,                plotBorderWidth: null,                plotShadow: false            },            title: {                text: ‘2014年各項目人數比例圖‘            },            tooltip: {                pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘            },            plotOptions: {                pie: {                    allowPointSelect: true,                    cursor: ‘pointer‘,                    dataLabels: {                        enabled: true,                        format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘,                        style: {                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black‘                        }                    }                }            },            series: [{                type: ‘pie‘,                name: ‘所佔比例‘,                data: []            }]        });

然後綁定即可：

        var data1 = [];        $.post("/Home/getChartData", function (json) {            $(json).each(function (index, item) {                data1.push([item.name, item.val]);            });            chart1.series[0].setData(data1);        });

 

3.運行代碼效果如下，介面還是挺酷的

4.由於圖片的菜單是英文的，所以要漢化一下,在主題檔案下面添加以下代碼即可：

Highcharts.setOptions({    lang: {        contextButtonTitle: "圖表菜單",        printChart: "列印圖片",        downloadJPEG: "下載JPEG 圖片",        downloadPDF: "下載PDF文檔",        downloadPNG: "下載PNG 圖片",        downloadSVG: "下載SVG 向量圖",        exportButtonTitle: "匯出圖片"    }});

 

HIghChartS官網：http://www.highcharts.com/

HighCharts Demo:http://www.highcharts.com/demo/