js4-3

by wang_siang

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <div>
        <canvas id="lineChart" class="chart"></canvas>
    </div>

    <div>
        <canvas id="barChart" class="chart"></canvas>
    </div>
    <div>
        <canvas id="pieChart" class="chart"></canvas>
    </div>

CSS

div {
            max-width: 800px;
            margin: 80px auto;
            padding:40px;
            border: 2px solid rgba(170, 170, 170, 0.179);
            border-radius: 20px;
        }

JavaScript

const lineChart = document.getElementById('lineChart');
        const barChart = document.getElementById('barChart');
        const pieChart = document.getElementById('pieChart');

        const dataLabel1 = ['103年', '104年', '105年', '106年', '107年', '108年', '109年', '110年', '111年', '112年'];
        const lienSource = [
            {
                label: '機車/男性',
                data: [55561, 54941, 51331, 49640, 44797, 40403, 36495, 25406, 42476, 48825],
                color: 'rgba(255, 107, 107)'
            },
            {
                label: '機車/女性',
                data: [4106, 4374, 4449, 4330, 3750, 3703, 3350, 2288, 4076, 5009],
                color: 'rgba(77, 150, 255)'
            },
            {
                label: '汽車/男性',
                data: [27322, 29208, 29169, 29700, 28547, 25704, 23477, 18007, 27283, 31070],
                color: 'rgba(107, 203, 119)'
            },
            {
                label: '汽車/女性',
                data: [1893, 1986, 2072, 2117, 2054, 2229, 2249, 1636, 2674, 2960],
                color: 'rgba(255, 199, 95) '
            },
        ]


        const datasets1 = lienSource.map((item) => (
            {
                label: item.label,
                data: item.data,
                fill: false,
                borderWidth: 2,
                borderColor: item.color,
                pointBackgroundColor: 'transparent',
                pointHoverBackgroundColor: item.color,
                pointHoverRadius: 20,
                pointRadius: 4,
                backgroundColor: item.color
            })
        )

        new Chart(lineChart, {
            type: 'line',
            data: {
                labels: dataLabel1,
                datasets: datasets1
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
   ...