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

標籤：seo   樣式   rip   sock   htm   abs   box   str   用法   

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

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