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

function Line_Status_1(){
    var  ctr =$('#Line__canvaas_1');
    var line = new Chart(ctr,{
        type: 'line',
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '使用次數',
                data: [65, 60, 70, 74],
                fill: false,
                borderColor: [
                    'rgba(15, 15, 15, .3)'
                ],
                borderWidth: 1,
            }],
        },
    });
}

二、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

function Line_Status_2(){
    var  ctr =$('#Line__canvaas_2');
    var line = new Chart(ctr,{
        type: 'line',
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '使用次數',
                data: [10, 27, 15, 18],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                borderWidth: 1,
            }],
        },
        options: {
            indexAxis: 'y',
            scales: {
              x: {
                beginAtZero: true
              }
            }
        }
    });
}

三、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

function bar_status_1(){
    var ctr = $('#Bar__canvaas_1');
    var bar = new Chart(ctr, {
        type: 'bar',
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '目前生產數量',
                data: [12, 19, 5, 4 ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

四、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

function bar_status_2(){
    var ctr = $('#Bar__canvaas_2');
    var bar = new Chart(ctr, {
        type: 'bar',
        indexAxis: 'y',
        fill: false,
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '目前生產數量',
                indexAxis : 'y',
                data: [12, 19, 5, 4 ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1
            }]
        }
    });
}

範例合併

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

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

$(document).ready(function(){
    //參考網址 Line Chart
    //https://www.chartjs.org/docs/latest/charts/line.html
    Line_Status_1();
    Line_Status_2();

    bar_status_1();
    bar_status_2();
});


//#region bar
function bar_status_1(){
    var ctr = $('#Bar__canvaas_1');
    var bar = new Chart(ctr, {
        type: 'bar',
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '目前生產數量',
                data: [12, 19, 5, 4 ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}
function bar_status_2(){
    var ctr = $('#Bar__canvaas_2');
    var bar = new Chart(ctr, {
        type: 'bar',
        indexAxis: 'y',
        fill: false,
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '目前生產數量',
                indexAxis : 'y',
                data: [12, 19, 5, 4 ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1
            }]
        },
        // options: {
        //     scales: {
        //         indexAxis: 'y',
        //     }
        // }
    });
}
//#endregion bar



//#region Line
function Line_Status_1(){
    var  ctr =$('#Line__canvaas_1');
    var line = new Chart(ctr,{
        type: 'line',
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '使用次數',
                data: [65, 60, 70, 74],
                fill: false,
                borderColor: [
                    'rgba(15, 15, 15, .3)'
                ],
                borderWidth: 1,
            }],
        },
    });
}

function Line_Status_2(){
    var  ctr =$('#Line__canvaas_2');
    var line = new Chart(ctr,{
        type: 'line',
        data: {
            labels: ['熱處理', '基磨', '成磨', 'QA成品'],
            datasets: [{
                label: '使用次數',
                data: [10, 27, 15, 18],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                borderWidth: 1,
            }],
        },
        options: {
            indexAxis: 'y',
            scales: {
              x: {
                beginAtZero: true
              }
            }
        }
    });
}
//#endregion Line

CSS

@charset "UTF-8";

*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Tool */
.font-h3{
    font-size: 50px;
    text-align: center;
}

/* other */
.container{
    position: relative;
    width: 1350px;
    margin-left: auto;
    margin-right: auto;
}
.card__body{
    display: inline-block;
    position: absolute;
}
.card__area{
    width: 600px;
    padding-left: ;
}

.bar{
    top: 0;
    left: 50%;
}