2016年3月19日 星期六

ChartJS 簡單好用的圖表元件

正所謂一圖解千文,一張圖表可以更容易地看出資料背後所代表的意義
ChartJS是一套簡單好用基於HTML5的JS Library,提供六種圖表,使用方式還滿簡單地

首先透過Nuget或Bower取得ChartJS
$ Install-Package Chart.js
$ Bower Install Chart.js

宣告一個canvas元素
<canvas id="myLine" width="300" height="400"></canvas>

準備該適合該圖表的資料
把資料傳入該圖表即可
(function () {

            var lineChartData = {

                labels: ["January", "February", "March", "April", "May", "June", "July"],

                datasets: [

                  {

                      fillColor: "rgba(220,220,220,0.5)",

                      strokeColor: "rgba(220,220,220,1)",

                      pointColor: "rgba(220,220,220,1)",

                      pointStrokeColor: "#fff",

                      data: [65, 59, 90, 81, 56, 55, 40]

                  },

                  {

                      fillColor: "rgba(151,187,205,0.5)",

                      strokeColor: "rgba(151,187,205,1)",

                      pointColor: "rgba(151,187,205,1)",

                      pointStrokeColor: "#fff",

                      data: [28, 48, 40, 19, 96, 27, 100]

                  }

                ]

            }



            var ctx = document.getElementById("myLine").getContext("2d");

            var myLine = new Chart(ctx).Line(lineChartData);

        })();





2016年3月15日 星期二

前端套件管理工具: Bower

安裝bower
$ npm install bower -g

產生設定檔
$ bower init

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.5",
    "jquery": "2.1.4",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.4",
    "angularjs": "1.5.0"
  }
}

新增.bowerrc檔案輸入資料夾位置
{
  "directory": "wwwroot/lib"
}


安裝套件
$ bower install
$ bower install jquery
$ bower install jquery --save
$ bower install jquery --save-dev


查詢套件
$ bower search jquery


查詢指定套件詳細訊息
$ bower info jquery


查詢已安裝套件
$ bower list


移除套件
$ bower uninstall jquery


2016年3月14日 星期一

gulp 前端最佳化js和css工具

安裝gulp-cli套件
$ npm install gulp-cli -g


安裝gulp套件
$ npm install gulp --save-dev


安裝gulp plugin套件
$ npm install gulp-concat
$ npm install gulp-cssmin
$ npm install gulp-uglify
$ npm install rimraf

新增gulpfile.js
/// <binding BeforeBuild='min' Clean='clean' />
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var paths = {
    webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "assets/site.min.js";
paths.concatCssDest = paths.webroot + "assets/site.min.css";

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);
gulp.task("default", function () {
    gulp.watch(paths.js, function () {
        gulp.run("min:js");
    });
    gulp.watch(paths.css, function () {
        gulp.run("min:css");
    });
});


執行工作
$ gulp clean
$ gulp min


NodeJS套件管理工具

# npm介紹

- node package manager
- npm官網

# package.json

- $ npm init
- package.json文件
# npm指令 - 安裝資料夾 **node_modules** ``` shell # 安裝套件 $ npm install -g $ npm install # 安裝並寫入設定檔 $ npm install --save $ npm install ** --save-dev # 移除套件 $ npm uninstall -g $ npm uninstall # 搜尋套件 $ npm search # 列出已安裝的套件 $ npm list -g $ npm list # 更新套件 $ npm update -g $ npm update # 安裝package.json設定檔的套件 $ npm install -l ```