highcharts基本配置和使用highcharts做手機端圖標

使用highcharts三個理由：
1》手機適配
2》大數據的支持
3》svg的優勢
缺點：
不開源、學習資料少

官方有基本的常規用法，一般都是基於jquery寫的例子，也可以自己封裝函數，用原生來調取，性能簡單測試一下，沒發現兩者有什么大的區別。

heightcharts.js是一些簡單圖表的框架js,但是要做動態實時數據圖
　　<script src="js/jquery-1.7.2.js"></script>
   <script src="js/highstock.js"></script>

下面是之前工作需求的一些參數，我做一下解釋，由於里面參數太多，就不一一做說明。
Highcharts.setOptions({
         global: {//由於時間軸的動態數據，需要把時間格式確定一下，utc是國際時間格式，higharts默認是國際，在中國需要GMT，所以這個需要轉變為false。
              useUTC: false
         }
  });//獲取當前時間

圖表配置

$('#container').highcharts({//jquery選中盒子，並且給盒子加圖表，這是基本寫法。
    chart: {//所有的配置參數都寫在chat這個json里面。
        events: {//處理一些事件，有click  mouseover,load等等，設置其不同的效果，用函數來表達你想要的事件。
            load: function () {
                // 設置圖標每秒跟新
                var series = this.series[0];
                setInterval(function () {
                    var i=0;
                    var x = parseInt((new Date()).getTime()), // 當前時間
                            y = Math.abs((Math.random()-0.5))*20;//每個點兩個值  x和y。
                    series.addPoint([x, y], true, false);//這是動態增加數據的關鍵，其實增加的區域在對象series里面。addpoint是其一個方法，如需重新渲染的話用update
                },3000);},
        },
        backgroundColor:'#fff',//圖表背景色
        pinchType:'',// 讓在移動端可以滑動
        zoomType : ''//點擊縮放 里面可以放 y x xy
    },
    colors: ['#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],//顏色數組，會根據不同的區域自動放不同的顏色，一般在蠟燭圖和餅狀圖效果明顯
    credits : { // 網站標識
        enabled : false//版權為fals 就不會再顯示highcharts的logo。
    },
    navigator : { // 底部導航內容
        enabled : false//此處如果為true 就會出現導航，你可以設置下面的效果，讓其功能出現，可以拖動縮放突變分辨率
    },
    scrollbar : {
        enabled : false//滑動按鈕
    },
    rangeSelector : {
        enabled : false
    },
    xAxis: {//x軸設置
        dateTimeLabelFormats: {//給時間軸格式化，展示你想要的時間效果。
            second: 'D1'?'%m-%d':'%H:%M:%S',
            minute: 'D1'?'%m-%d':'%H:%M',
            hour: 'D1'?'%m-%d':'%H:%M',
            day: 'D1'?'%m-%d':'%H:%M',
            week: 'D1'?'%m-%d':'%H:%M',
            month: 'D1'?'%m-%d':'%H:%M'
        },
        top:20,//x軸位置
        lineColor: '#90ed7d',//軸線的顏色
        lineWidth: 1,//軸線的寬度
        type: 'datetime',//聲明這是時間軸
        tickWidth: 1,//軸上刻度寬度
        tickColor: '#8085e9',//刻度顏色
        minRange: 360000,//最小差值，這是以時間戳來計算的
        tickInterval:36e5,//顯示刻度的位置，也就是隔多少范圍顯示一個
        tickLength:10,//線的長度
        labels: {//顯示內容的設置，顏色或字體的大小。
            style: {
                color: '#000',
                fontSize: '8px'
            }
        },
        plotLines: [{//標示線設置。
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    yAxis: {//y軸設置 其實與x軸沒啥大的區別，就看你想要什么樣的效果。
        top:20,
        opposite:true,
        minorTickInterval:"auto",
        lineColor: '#8085e9',
        lineWidth: 0,
        tickWidth: 0,
        tickLength:0,
        tickColor: '#8085e9',
        title: {
            text: ''
        },
        labels: {
            style: {
                color: '#000',
                fontSize: '8px'
            }
        },

        plotLines: [{//這塊需要重點說一下，指示線需要設置一定的樣式，可以設置顯示的位置，線型，粗細，長短，字體，以及text標簽。
            value: 0,
            color: 'green',
            dashStyle: 'LongDashDotDot',
            width: 2,
            label: {
                useHTML: true,
                text: '<strong>訂單價：'+0+"</strong>",
                align:"left"
            }
        }]
    },
    plotOptions: {//此處更重要，這是你圖表的二次解釋說明修改的地方，里面可以根據不同的列表樣式來着重說明體現
        area: {//面積圖的說明
            fillColor: {//面積顏色漸變。
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                stops: [
                    [0, '#808080'],
                    [1, Highcharts.Color('#808080').setOpacity(0).get('rgba')]
                ]
            },
            lineWidth: 1,
            marker: {
                enabled: false
            },
            shadow: false,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        },
        candlestick: {
            lineColor: 'black'
        },
        boxplot: {
            fillColor: '#505053'
        }
    },
    series : [{//數據展示的位置，
        type: 'M1' ?'area':'candlestick',
        name : 'ha'
    }
    ]
});

上面是在chart里面動態增加的數據，如果想用ajax或者websocket動態增加數據，還可以這么寫
$(function () {
   containerPain();//把上面的函數封裝  在這兒調用。但是 series是全局變量，需要var 一個。
   setInterval(function () {//此處寫ajax或者websocket.
      var x = (new Date()).getTime(), // current time
      y = 44+(rnd(0.5,0.6));
      series.addPoint（【x,y】）;
   }, 1000);
});