【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

利用 Canvas 實作統計圖表

Canvas 支援2D圖形描繪,因此只要整理好相關的數據,就能透過相關的 API 將其轉換成為視覺化的圖形。考慮以下的資料:

月份JanuaryFebruaryMarchAprilMayJuneJuly
銷售額25324061362540

建立一組對應此資料的資料物件:

var chartdata = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    data: [25, 32, 40, 61, 36, 25, 40],
    color: ["red", "orange", "yellow", "green", "blue", "black", "gray"]
}

接下來透過 Canvas API ,於底下配置 Canvas 元素中,逐一描繪對應的圖表。


以下為需要的程式碼:

<script>
 //JSON 物件
        var start_x = 60;
        var start_y = 400;

        var chartdata = {
            labels: ["January", "February", "March",
"April", "May", "June", "July"],
            data: [25, 32, 40, 61, 36, 25, 40],
            color: ["red", "orange", "yellow",
"green", "blue", "black", "ghostwhite"]
        }
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');
       
        // Y
        ctx.beginPath();
        ctx.moveTo(start_x, 100);
        ctx.lineTo(start_x, start_y);
        ctx.stroke();
        // X
        ctx.beginPath();
        ctx.moveTo(start_x, start_y);
        ctx.lineTo(520, start_y);
        ctx.stroke();

        ctx.lineWidth = 20;
        for (i = 0; i < 7; i++) {
            ctx.beginPath();
            ctx.strokeStyle = chartdata.color[i] ;
            ctx.moveTo((i + 1) * start_x + start_x, start_y);
            ctx.lineTo((i + 1) * start_x + start_x, start_y –
chartdata.data[i] * 5);
            ctx.stroke();

            ctx.fillText(chartdata.labels[i], (i + 1) *
start_x + start_x, start_y + 38);
        }
</script>


沒有留言: