share170403
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>share</title>
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script type="text/javascript" src="./js/zepto.min.js"></script>
    <script src="./js/Chart.js"></script>
</head>

<body>
    <div class="content">
        <!-- title -->
        <div class="main-title pos-r">
            <p class="c-blue tc fz-20 text">我家宝宝的乘车舒适度</p>
        </div>
        <!-- scores -->
        <div class="score">
            <div class="circle c-blue tc fz-16">
                <p><img src="./images/icon-smile.png">今日舒适度</p>
                <p>83<span>分</span></p>
            </div>
            <div class="text">
                <p class="c-333 fz-16 tc lh-2 mt-20">恭喜你，击败了全国93%的用户</p>
                <p class="fz-14 tc lh-2 c-golden"><img src="./images/icon-pig.png">&nbsp;&nbsp;获得了93个积分</p>
            </div>
        </div>
        <!-- 0.5px lines -->
        <div class="border-t-thin"></div>
        <div class="history">
            <!-- title -->
            <div class="fz-16 c-333 title pos-r">
                <img src="./images/icon-history.png">
                <span>舒适度历史记录</span>
            </div>
            <!-- tab menu -->
            <div>
                <ul class="tabs clearfix">
                    <li class="active">周</li>
                    <li>月</li>
                    <li>总</li>
                </ul>
            </div>
            <!-- charts -->
            <div>
                <canvas id="chart"></canvas>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        $("ul.tabs li").click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            var index = $(this).index();
            filter_show(index);
        })
    })
    </script>
    <script type="text/javascript">
    // 渲染的数据
    var showDatas = [
        // 周
        {
            labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            datasets: [{
                fillColor: "#ebf6ff",
                strokeColor: "#56b9ff",
                pointColor: "#56b9ff",
                pointStrokeColor: "#fff",
                data: [50, 60, 70, 80, 50, 30, 20]
            }]
        },
        // 月
        {
            labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            datasets: [{
                fillColor: "#ebf6ff",
                strokeColor: "#56b9ff",
                pointColor: "#56b9ff",
                pointStrokeColor: "#fff",
                data: [65, 59, 90, 81, 56, 55, 40, 80, 56, 55, 40, 80]
            }]
        },
        // 总
        {
            labels: ["1", "2", "3", "4"],
            datasets: [{
                fillColor: "#ebf6ff",
                strokeColor: "#56b9ff",
                pointColor: "#56b9ff",
                pointStrokeColor: "#fff",
                data: [81, 56, 55, 40]
            }]
        }
    ];
    var options = {
        //String - Colour of the scale line
        scaleLineColor: "rgba(0,0,0,.1)",

        //Number - Pixel width of the scale line
        scaleLineWidth: 1,

        //Boolean - Whether to show labels on the scale
        scaleShowLabels: false,

        //Interpolated JS string - can access value
        scaleLabel: "<%=value%>",

        //String - Scale label font declaration for the scale label
        scaleFontFamily: "'Arial'",

        //Number - Scale label font size in pixels
        scaleFontSize: 12,

        //String - Scale label font weight style
        scaleFontStyle: "normal",

        //String - Scale label font colour
        scaleFontColor: "#666",

        ///Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: true,

        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth: 1,

        //Boolean - Whether the line is curved between points
        bezierCurve: false,

        //Boolean - Whether to show a dot for each point
        pointDot: true,

        //Number - Radius of each point dot in pixels
        pointDotRadius: 3,

        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth: 1,

        //Boolean - Whether to show a stroke for datasets
        datasetStroke: true,

        //Number - Pixel width of dataset stroke
        datasetStrokeWidth: 2,

        //Boolean - Whether to fill the dataset with a colour
        datasetFill: true,

        //Boolean - Whether to animate the chart
        animation: true,

        //Number - Number of animation steps
        animationSteps: 60,

        //String - Animation easing effect
        animationEasing: "easeOutQuart",

        //Function - Fires when the animation is complete
        onAnimationComplete: null

    }
    filter_show(0);

    /**
     * 筛选展现形式
     * @param  {[type]} type [0 1 2]
     * @return {[type]}      [description]
     */
    function filter_show(type) {
        $('#chart').replaceWith('<canvas id="chart"></canvas>');
        var canvas = document.getElementById('chart');
        canvas.width = window.innerWidth - 20;
        canvas.height = 130;
        var ctx = document.getElementById("chart").getContext("2d");
        var myNewChart = new Chart(ctx).Line(showDatas[type], options);
    }
    </script>
</body>

</html>