!--忽視開始--！

　　給大家推薦一款強大的編輯器，那就是集響應快、體驗好、逼格高、功能豐富為一體的sublime text 3。它除了以上特點，還有一個最重要的功能:方便快捷的插件擴展，支持大量插件而且均支持命令行安裝，只要一條簡單的命令就可以完成插件的安裝。想要提高開發效率，sublime是一個很好的選擇！

　　!--忽視結束--！

　　以下為項目開發時遇到的問題或者學習到的前端技術：

　　1、height:100%設置無效

　　解決方法:html,body{margin:0;height:100%}

　　2、div居中

　　解決方法:

　　　　兩種方案

　　　　1、第一種情況，div寬度固定的情況下，給div設置width，然后margin:0 auto;

　　　　2、第二種情況，div寬度不固定或者說不想給div加寬度限制，給div設置display:inline-block;然后給他的父元素加上text-align:center;

　　3、純css實現奇偶行

　　　　解決方法:

　　　　　　使用css的:nth-child(odd)選擇器就可以了：tr:nth-child(odd){background-color: #eee}

　　4、css內進行簡單運算

　　　　解決方法:

　　　　　　使用calc函數：th{width: calc(100%/7);}

　　5、遍歷js對象

　　　　解決方法:

　　　　　　for (var k in jsObj) {

　　　　　　　　console.info("key:" + k + ",value:" + jsObj[k]);

　　　　　　}

　　6、解決ie Date.getTime兼容性問題

　　　　解決方法:

　　　　　　由于ie不兼容 yyyy-mm-dd的日期格式，所以把“-”替換為“/”就可以解決問題

　　　　function getTime(dateStr){
　　　　　　dateStr = dateStr.replace("-", "/");
　　　　　　return Date.parse(dateStr);
　　　　}

　　由于是數據分析的后臺，所以用到了圖表，我所采用的插件是highcharts，一下是使用highcharts的一點經驗：

　　為了方便數據的修改和呈現，一般定義一個全局的參數

//圖表參數
var chart = {
 chart: {
 zoomType: 'x',
 spacingRight: 20
 },
 title: {
 text: '曲線圖'
 },
 xAxis: {
 type: 'datetime',
 title: {
 text: '時間'
 },
 dateTimeLabelFormats: {
 second: '%H:%M:%s',
 minute: '%d日 %H:%M',
 hour: '%m月%d日%H點',
 day: '%Y年%m月%d',
 week: '%Y-%m-%d',
 month: '%Y年%m月',
 year: '%Y年'
 }
 },
 yAxis: {
 title: {
 text: '體溫'
 }
 }
};

　　里面的參數都見名知意，就不一一解釋了，具體可以看相關文檔。這里xAxis 里面的type: 'datetime'表示x軸按照時間顯示。

　　這是圖表初始化方法：

var ser = []; 
var ser = [];
ser[0] = {
 type:'line',
 name: "參數名",
 data: [
 ["X值","Y值"],
 ["X值","Y值"],
 ["X值","Y值"]
 ]
};
chart.series = ser; 
$('#container').highcharts(chart);

　　X軸按照時間顯示的時候X值應該為時間戳，綁定之前記得對數組進行按X軸升序排序。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com