JSFiddle - React, Tailwind, and code Playground

by kikkoma

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JavaScript

const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [
                    '土石流及大規模崩塌', '水庫放流', '市話通訊中斷', '交流道下地方連絡道淹水', '行動電話中斷', '河川高水位', 
                    '降雨', '高溫', '停水', '停班停課', '區排警戒', '強風', '淹水', '道路封閉', '雷雨', '颱風', '鐵路事故'
                ],
                datasets: [{
                    label: '推送次數',
                    data: [28, 34, 33, 483, 31, 270, 49, 24, 302, 92, 205, 28, 172, 402, 66, 81, 61],
                    backgroundColor: '#5F7161',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                indexAxis: 'y', // 將X軸和Y軸對調
                scales: {
                    x: {
                        beginAtZero: true
                    },
                    y: {
                        ticks: {
                            autoSkip: false, // 確保所有標籤都顯示
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }
                }
            }
        });