Chart 前端操作

https://www.chartjs.org/docs/2.7.2/axes/radial/

前置作業 -設定/安裝

一、CDN

Script 選擇其中一個 js 即可。

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Chart.js v2.4.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>

<!-- jquery v3.6.0 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>
    

二、參數設定圖表

基本圖表樣式

Chart.js 範例先簡單展示四個圖表樣式。

一、Line Chart - 曲線圖

HTML

 <div class="card__body chart line">
    <div class="title__h3">
        <h3 class="font-h3">Line Chart</h3>
    </div>
    <div class="card__item--line card__area">
        <canvas id="Line__canvaas_1"></canvas>
    </div>
</div>

JS

二、Line chart - 折線圖

設定類似樣式需要再 scales 設定x 軸的beginAtZero 為 true

HTML

<div class="card__body chart line">
    <div class="title__h3">
        <h3 class="font-h3">Line Chart</h3>
    </div>
    <div class="card__item--line card__area">
        <canvas id="Line__canvaas_2"></canvas>
    </div>
</div>

JS

三、Bar Chart 長條圖

HTML

<div class="card__body chart bar">
    <div class="title__h3">
        <h3 class="font-h3">Bar Chart</h3>
    </div>
    <div class="card__item--bar card__area">
        <canvas id='Bar__canvaas_1'></canvas>
    </div>
</div>

JS

四、Bar Chart 橫條圖

HTML

<div class="card__body chart bar">
    <div class="title__h3">
        <h3 class="font-h3">Bar Chart</h3>
    </div>
    <div class="card__item--bar card__area">
        <canvas id='Bar__canvaas_2'></canvas>
    </div>
</div>

JS

範例合併

將上方功能合併一個介面。

HTML

    <div class="container">
        <div class="card__body chart line">
            <div class="title__h3">
                <h3 class="font-h3">Line Chart</h3>
            </div>
            <div class="card__item--line card__area">
                <canvas id="Line__canvaas_1"></canvas>
            </div>
            <div class="card__item--line card__area">
                <canvas id="Line__canvaas_2"></canvas>
            </div>
        </div>
        <div class="card__body chart bar">
            <div class="title__h3">
                <h3 class="font-h3">Bar Chart</h3>
            </div>
            <div class="card__item--bar card__area">
                <canvas id='Bar__canvaas_1'></canvas>
            </div>
            <div class="card__item--bar card__area">
                <canvas id='Bar__canvaas_2'></canvas>
            </div>
        </div>


        <div class="card__body chart radar">
            <div class="title__h3"></div>
            <div class="card__item--radar card__area">
                <canvas></canvas>
            </div>
        </div>
        <div class="card__body chart polar">
            <div class="title__h3"></div>
            <div class="card__item--polar card__area">
                <canvas></canvas>
            </div>
        </div>
        <div class="card__body chart bubble">
            <div class="title__h3"></div>
            <div class="card__item--bubble card__area">
                <canvas></canvas>
            </div>
        </div>
        <div class="card__body chart scatter">
            <div class="title__h3"></div>
            <div class="card__item--bar card__area">
                <canvas></canvas>
            </div>
        </div>
        <div class="card__body chart area">
            <div class="title__h3"></div>
            <div class="card__item--area card__area">
                <canvas></canvas>
            </div>
        </div>
        <div class="card__body chart mixed">
            <div class="title__h3"></div>
            <div class="card__item--mixed card__area">
                <canvas></canvas>
            </div>
        </div>
    </div>

JS

CSS