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);});