CJ
/
keyword_analytic_web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
							<html>
  
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
    <!-- Chart.js v2.4.0 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
    <img src="{{ url_for('static', path='/fastapi.png') }}" alt="FastAPI">
    <h1>Item ID: {{ id }}</h1>
    <h1>Title: {{ titles }}</h1>
    <canvas id="bar-yt" width="400" height="200"></canvas>
    <canvas id="myChart-pie" width="400" height="200"></canvas>
    <canvas id="bar-yt1" width="400" height="200"></canvas>  
    
    <p>
      接著
    </p>
    
    <script>
      var ctx10 = document.getElementById('bar-yt');
      var myChart10 = new Chart(ctx10, {
        type: 'bar', //圖表類型
        data: {
          //標題
          labels: [ "那些足球教我的事", '那些足球教我的事'],
          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>
    <h1>id: {{ id }}</h1>
    
    <script>
    var ctx10 = document.getElementById('bar-yt');
    var myChart10 = new Chart(ctx10, {
      type: 'bar', //圖表類型
      data: {
        //標題
        labels: [ "{{ keyword }}", '那些足球教我的事'],
        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>


{% block script %}{% endblock %}


    <script>
    var ctx10 = document.getElementById('bar-yt1');
    var myChart11 = new Chart(ctx10, {
      type: 'bar', //圖表類型
      data: {
        //標題
        labels: [ "{{ keyword }}", '那些足球教我的事'],
        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>


	<!-- <script>
		var ctx = document.getElementById( "example" ),
		example = new Chart(ctx, {
				// 參數設定[註1]
				type: "bar", // 圖表類型
				data: {
					// 資料設定[註2]
					labels: [ "{{ id }}", "{{ id }}", "{{ id }}" ], // 標題
					datasets: [{
						// 資料參數設定[註3]
						label: "# of Votes", // 標籤
						data: [ {{ id }}, {{ num }}, {{ num }} ], // 資料
						backgroundColor: [ // 背景色
						"#FF0000",
						"#00FF00",
						"#0000FF",
						],
						borderWidth: 1 // 外框寬度
					}]
				}
			});
	</script> -->
</body>
</html>