Chart.js 範例

Posted on Edited on In Views: Disqus:

 

Chart.js 是專門將圖表以 HTML 呈現方式應用在網頁上，

官網都有詳細說明，個人覺得不難理解，故只列出範例，

就不多做說明了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
    <canvas id="myChart" width="900" height="900"></canvas>
    <script>
        Chart.defaults.global.defaultFontSize = 20;
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: ['強化系',
                    '變化系',
                    '具現化系',
                    '特質系',
                    '操作系',
                    '放出系'],
                datasets: [{
                    data: [60, 80, 100, 0, 60, 40],
                    label: '單位%',
                    backgroundColor: 'rgb(215, 236, 251,0.5)',
                    borderColor: 'rgba(54, 162, 235,1)',
                    pointBackgroundColor: 'rgba(54, 162, 235,1)',
                    pointRadius: 5,
                    pointHoverBackgroundColor: 'rgba(54, 162, 235,1)',
                    pointHoverRadius: 5,
                }]
            },
            options: {
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 500
                    }
                },
                legend: {
                    display: true,
                    labels: {
                        fontSize: 20
                    }
                },
                scale: {
                    pointLabels: {
                        fontSize: 20,
                    }
                }
            }
        });
    </script>
</body>
</html>

 

參考資料：

https://www.chartjs.org/

https://d3js.org/