Highcharts实现走势图

      Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

    HighCharts 中文api很少，并且零散不全,一般通过http://api.highcharts.com/highcharts也都可以看懂。

    先看效果吧

  

这个是近期（9月2日到11月27日的汇率走势图）数据，其实现非常简单，关键代码如下 1 <div id="win1" class="mini-window" title="近期汇率走势" style="95%;height:80%;" showModal="true" allowResize="true" >

     <div id="chartContainer" style="100%;height:100%;"></div> 
</div>

<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script type="text/javascript">
    var Xaxis;     //X轴上面显示的数据
    var AllData;   //走势图中的数据

        $.ajax({
            url: '~~~~~',
            type: 'GET',
            success: function (e) {
                  Xaxis = mini.decode(e, true);   //通过后来成功返回后，要对其进行编码，使其成为json对象
                   
                $.ajax({                    
                    url: '~~~~~~~',
                    type: 'GET',
                    success: function (e) {
                        debugger
                        AllData = mini.decode(e, true);   
                        showChartWindow();   //构造 Highcharts 所需要的数据
                        grid.unmask();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(jqXHR.responseText);                       
                        grid.unmask();
                    }
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
                grid.unmask();
            }
        });

    function showChartWindow() {
        var win = mini.get("win1");
        win.show();
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chartContainer',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: '汇率走势',
                x: -20 //center
            },
            xAxis: {
                categories: Xaxis
            },
            yAxis: {
                title: {
                    text: '元'
                },
                plotLines: [{
                    value: 5.5,
                     2,
                    color: '#FF0000'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                    this.x + ': ' + this.y + '元';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: 10,
                y: 100,
                borderWidth: 0
            },
            series: AllData,
            credits: { enabled: false }
        }
            );
    }

其中，后台成功返回的Xaxis 数据为：

['09/02','09/03','09/04','09/05','09/06','09/09','09/10','09/11','09/12','09/13','09/16','09/17','09/22','09/23','09/24','09/25','09/26','09/27','09/29','10/08','10/09','10/10','10/11','10/14','10/15','10/16','10/17','10/18','10/21','10/22','10/23','10/24','10/25','10/28','10/30','10/31','11/01','11/04','11/05','11/07','11/11','11/12','11/13','11/14','11/15','11/18','11/19','11/20','11/21','11/22','11/25','11/26',]

返回的AllData数据为：
[{name:'汇率',data:[6.17,6.17,6.17,6.17,6.17,6.16,6.16,6.16,6.16,6.16,6.16,6.16,6.16,6.15,6.15,6.15,6.15,6.15,6.15,6.14,6.14,6.15,6.15,6.14,6.14,6.14,6.14,6.14,6.14,6.14,6.13,6.13,6.13,6.13,6.14,6.14,6.15,6.15,6.14,6.15,6.14,6.14,6.13,6.13,6.14,6.13,6.13,6.13,6.14,6.14,6.13,6.14,]}]，data中的数据必须为数字，否则无法显示

其他功能：

      1.点击右上角的小方框，可以下载走势图的图片（多种格式）;

      2.点击右侧“汇率”，则可以以藏该走势线条，如下图