- views.py 에서 차트 데이터를 배열 형식으로 받아오기
# 가격변동리스트
price_list = [["Date", "Price"],]
for prices in market:
price_list.append([prices.pk,prices.sell_price])
return render(request, 'market/detail.html', {'price_list':price_list})price_list = [["Date", "Price"],[1, 1000],[2, 1500],...] 와 같은 이중배열 값을 넘겨준다
구글차트 데이터 값이 아래와 같은 이중배열 형태를 가지고 있으니까 위의 변수를 그대로 가져다 넣어주면 끝!
var data = google.visualization.arrayToDataTable([
['Year', 'Expenses'],
['2019', 1000],
['2020', 1200],
['2021', 1400],
['2022', 1600]
]);
-
market/detail.html
<body> {#거래내역차트 들어가는 곳#} <div id="price_chart"> <p class="chart_title">Price Chart</p> {#차트코드#} <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); {#데이터값 변수 선언#} var prices = {{ price_list|safe }} function drawChart() { {#차트데이터 들어가는 곳#} var data = google.visualization.arrayToDataTable( prices ); {#옵션: 차트이름#} var options = { title: 'Price Chart' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </body>
오늘 점심 뭐 먹지