javascript_series4_chart.js

by aelgy369

HTML

<div>
  <canvas id="daycareCenter"></canvas>
  <canvas id="domesticViolance"></canvas>
  <canvas id="educationOfLegislator" width="400" height="400"></canvas>
</div>

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

JavaScript

// bar chart

const ctx = document.getElementById('daycareCenter');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['板橋區', '新莊區', '三重區', '新店區', '中和區', '土城區', '蘆洲區', '樹林區', '汐止區', '林口區'],
    datasets: [{
      label: '公共托嬰間數',
      data: [17, 11, 12, 11, 11, 8, 6, 6, 6, 6],
      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)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(204, 255, 0, 0.2)',
        'rgba(0, 255, 255, 0.2)',
        'rgba(255, 0, 255, 0.2)',
        'rgba(128, 128, 0, 0.2)',
      ],
      borderWidth: 0,
      hoverBackgroundColor: '#80FFFF',
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: '新北市各區公共托嬰間數（取前十位）',
        align: 'center',
        font: {
          size: 25,
          weight: 900,
        },
      },
      tooltip: {
        titleFont: {
          size: 18
        },
        bodyFont: {
          size: 16
        },
        xAlign: "center",
        yAlign: "bottom"
      },
    },
    indexAxis: 'y',
  }
});

// line chart

const dv = document.getElementById('domesticViolance');

new Chart(dv, {
  type: 'line',
  data: {
    labels: ['104', '105', '106', '107', '108', '109', '110', '111', '112'],
    datasets: [{
      label: '報案數',
      data: [33892, 31300, 31876, 30656, 32628, 36802, 37704, 38528, 41674],
      backgroundColor: [
        'rgba(0, 128, 128, 0.8)',
      ],
      borderColor: [
        'rgba(0, 128, 128, 0.8)',
      ],
      borderWidth: 2,
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: '新北市歷年家暴案量統計',
        align: 'center',
        font: {
          size: 25,
          weight: 900,
        },
      },
      tooltip: {
        titleFont: {
          size: 18
        },
        bodyFont: {
          size: 16
        },
        xAlign: "center",
        yAlign: "bottom"
 ...