图标控件HightChart的使用

基本的介绍：    

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.页面加载时加载数据，代码如下：

 $('#lineContainer').highcharts({
title: {
                text: '月温度统计表',
                x: -20 //center
            },
            subtitle: {
                text: '来源: 个人统计',
                x: -20
            },
            xAxis: {
                categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                    '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                title: {
                    text: '温度 (°C)'
                },
                plotLines: [{
                    value: 0,
                     1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',//标题的配置
                verticalAlign: 'middle',
                borderWidth: 0
            },

            //静态数据
            series: [{
                name: '北京',
               data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: '厦门',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: '温州',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: '周口',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]

         
        });

我们在做开发时当然要动态的加载数据，可用jquery的ajax方式条后台的方法获取数据，然后再进行绑定即可，如何绑定呢，不急，看下面：

首先初始化一个chart对象，并把其中涉series数据data设置为空：

  var option = ({
            chart: {
                renderTo: "lineContainer",
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '月温度统计表',
                x: -20 //center
            },
            subtitle: {
                text: '来源: 个人统计',
                x: -20
            },
            xAxis: {
                categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                    '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                title: {
                    text: '温度 (°C)'
                },
                plotLines: [{
                    value: 0,
                     1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',//标题的配置
                verticalAlign: 'middle',
                borderWidth: 0
            },

            //静态数据
            //series: [{
            //    name: '北京',
            //    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            //}, {
            //    name: '厦门',
            //    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            //}, {
            //    name: '温州',
            //    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            //}, {
            //    name: '周口',
            //    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            //}]

            series: []
        });

然后绑定即可：

    var data1 = [];
        $.post("/Home/getLineChartData", function (json) {
            $(json).each(function (index, item) { 
                var tem = [];
                $(item.val).each(function (index, i) {
                    tem.push(i);
                });
                data1.push({ name: item.name, data: tem });
            });
            //方法2
            option.series = data1;
            var chart = new Highcharts.Chart(option);
        });

 //    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/