CJ
/
keyword_analytic_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="fastapitutorial.com" content="Nofoobar">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <h1 class="display-4">The Dash Board</h1>
    <canvas id="bar-yt" width="400" height="200"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"
      integrity="sha512-tMabqarPtykgDtdtSqCL3uLVM0gS1ZkUAVhRFu1vSEFgvB73niFQWJuvviDyBGBH22Lcau4rHB5p2K2T0Xvr6Q=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
      integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
      integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
    <script src="https://kit.fontawesome.com/0b8ff4e055.js" crossorigin="anonymous"></script>
    <script>
      var ctx10 = document.getElementById('bar-yt');
      var myChart10 = new Chart(ctx10, {
        type: 'bar', //圖表類型
        data: {
          //標題
          labels: [ "{{ id }}", '那些足球教我的事'],
          datasets: [
            {
              label: '月搜量',
              data: [50, 11],
              borderColor: 'rgba(255, 206, 86, 1)',
              backgroundColor: 'rgba(255, 206, 86, 1)',
            },
            {
              label: '金額',
              data: [40.57, 91.72],
              borderColor: 'rgba(255, 99, 132, 1)',
              backgroundColor: 'rgba(255, 99, 132, 1)',
            },
          ],
        },
        options: {
          // indexAxis: 'y',
          plugins: {
            legend: {
              // display: false,
              labels: {
                padding: 5,
                font: {
                  display: false,
                  size: 16,
                },
              },
            },
          },
          scales: {
            x: {
              ticks: {
                font: {
                  size: 16,
                }
              },
              title: {
                display: false,
                font: {
                  family: 'Times',
                  size: 48,
                },
              },
            },
            y: {
              title: {
                display: true,
              },
              ticks: {
                font: {
                  size: 16,
                }
              },
              beginAtZero: true,
            }
          }
        }
      });
    </script>
</body>
</html>