HighStock

$(function() {  

   var chart = new Highcharts.StockChart({  

       chart: {  

           renderTo: 'container'//指向的div的id属性  

       },  

       exporting: {

           enabled: false //是否能导出趋势图图片  

       },   

       title:{  

               text : 'AAPL Stock Price(苹果股价)'//图表标题  

       },

       //X轴上相关的数据选项设置

       xAxis: {  

           tickPixelInterval: 100,//x轴上的间隔  

           title :{  

               text:"这里是对X轴的内容进行描述的title信息"  

           },  

           type: 'datetime', //定义x轴上日期的显示格式  

           labels: {  

           formatter: function() {  

               var vDate=new Date(this.value);  

               //alert(this.value);  

               return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();  

           },  

           align: 'center'  

       }  

       },  

       yAxis : {

             title: {    

                 text: 'Rate(汇率) Y轴展示'  //y轴上的标题  

             }    

        },    

       tooltip: {  

           xDateFormat: '%Y-%m-%d, %A'//鼠标移动到趋势线上时显示的日期格式  

       },  

       rangeSelector: {  

           buttons: [{//定义一组buttons,下标从0开始  

           type: 'week',  

           count: 1,  

           text: '1w'  

       },{  

           type: 'month',  

           count: 1,  

           text: '1m'  

       }, {  

           type: 'month',  

           count: 3,  

           text: '3m'  

       }, {  

           type: 'month',  

           count: 6,  

           text: '6m'  

       }, {  

           type: 'ytd',  

           text: 'YTD'  

       }, {  

           type: 'year',  

           count: 1,  

           text: '1y'  

       }, {  

           type: 'all',  

           text: 'All'  

       }],  

           selected: 1//表示以上定义button的index,从0开始 ，这里默认选中月

       },  

         

       series: [{  

           name: 'USD to EUR(美元对欧元)',//鼠标移到趋势线上时显示的属性名  

           data: usdeur,//属性值  

           marker : {  

               enabled : true,  

               radius : 3  

           },  

           shadow : true  

       }]  

   });  

});

      

      

    $(function () {

    

    var option = new Object();  

        option.chart = new Object();  

        option.chart.type="bar";

        option.chart.renderTo="container1";  

          

        option.title={title:"水果的摄入"};  

          

        option.xAxis={categories:['苹果','香蕉','桔子'],gridLineWidth:1};  

        option.yAxis={title:{text:"吃水果的量"},tickInterval:1};  

          

        option.series = new Array();

        option.series[0] = new Object();  

        option.series[0].name="张三";  

        option.series[0].data=[1,3,5];  

          

        option.series[1] = new Object();  

        option.series[1].name="李四";  

        option.series[1].data=[6,1,5.5];  

          

        option.series[2] = new Object();  

        option.series[2].name="刘能";  

        option.series[2].data=[3,1,0.3];  

          

        new Highcharts.Chart(option); 

        

    });

    

    $(function () {

   $('#container2').highcharts({

       chart: {

           type: 'area'

       },

       title: {

           text: 'Area chart with negative values'

       },

       xAxis: {

           categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']

       },

       credits: {

           enabled: false

       },

       series: [{

           name: 'John',

           data: [5, 3, 4, 7, 2]

       }, {

           name: 'Jane',

           data: [2, -2, -3, 2, 1]

       }, {

           name: 'Joe',

           data: [3, 4, 4, -2, 5]

       }]

   });

});

 

<h3 style="text-align:center;">highcharts使用示例</h3>  

<div id="container" style="display:inline;width:90%;height:500px;border:1px solid red;">

 

</div>

 

<div id="container1" style="display:inline;width:40%;height:500px;border:1px solid red;">

 

</div>

 

<div id="container3" style="display:inline;width:6%;height:500px;border:0px;">

 

</div>

 

<div id="container2" style="display:inline;width:40%;height:500px;border:1px solid red;">

 

</div>