js Char.Js 學習使用

<script src="../js/Chart.js"></script>
    <div class="aui-col-xs-6" style="border:none;"><canvas id="first" width="620" height="240" style="float:left;"></canvas></div>
    <script>
        var data = {
            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, 1000]
                },
                {
                    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]
                }
            ]
        }

        function myChart() {
            // $('#a_canvas').css('width', $(window).width()-30);
            //window.addEventListener("load", function () {

            var options = ['現金', '紅包', '碳值', '碳寶', '鑽石', '銖'];

            // 獲取上下文
            var context = document.getElementById("first").getContext("2d");
            var context1 = document.getElementById("seccend").getContext("2d");
            var sthreed3 = document.getElementById("sthreed").getContext("2d");
            //context.font = "20px Arial";
            new Chart(context).Line(data, options);
        }
        myChart();

    </script>

 

this.Line = function(data,options){
    
        chart.Line.defaults = {
            //網格線顯示在數據的上方
            scaleOverlay: false,
            //硬編碼重寫y軸網格線
            scaleOverride: false,
            //y軸刻度的個數
            scaleSteps: null,
            //y軸每個刻度的寬度
            scaleStepWidth: null,
            //y軸的起始值
            scaleStartValue: null,
            //x軸和y軸的顏色
            scaleLineColor: "rgba(0,0,0,0.1)",
            //x軸和y軸的線的寬度
            scaleLineWidth: 1,
            //是否顯示y軸的標簽
            scaleShowLabels: true,
            //標簽顯示值
            scaleLabel: "<%=value%>",
            //x軸和y軸標簽的字體
            scaleFontFamily: "'Arial'",
            //標簽字體的大小
            scaleFontSize: 12,
            //標簽字體的樣式
            scaleFontStyle: "normal",
            //標簽字體的顏色
            scaleFontColor: "#666",
            //是否顯示網格線
            scaleShowGridLines: true,
            //網格線的顏色
            scaleGridLineColor: "rgba(0,0,0,.08)",
            //網格線的線寬
            scaleGridLineWidth: 1,
            //是否是曲線
            bezierCurve: true,
            //是否顯示點
            pointDot: true,
            //點的大小
            pointDotRadius: 4,
            //點的邊框的大小
            pointDotStrokeWidth: 2,
            //是否顯示數據集的筆畫
            datasetStroke: false,
            //數據線的線寬度
            datasetStrokeWidth: 2,
            //圖標上的陰影部分
            datasetFill: true,
            //是否使用動畫效果
            animation: true,
            //動畫的步驟數(幀)
            animationSteps: 60,
            //動畫效果
            animationEasing: "easeOutQuart",
            //動畫完成時的回調
            onAnimationComplete: null
        };