1
Java, Spring, Hibernate 및 AmCharts 라이브러리를 사용하여 REST 아키텍처 및 CRUD 가정을 기반으로 응용 프로그램을 개발 중입니다.캔들 차트에 데이터를 다시로드하는 방법? AmChart 라이브러리
그러나 내 프로젝트에서 AmCharts의 캔들 차트 (주식 차트)로 데이터를 다시로드하는 데 문제가 있습니다.
내 자바 스크립트 코드 :
var request;
firstDeploy();
function firstDeploy() {
request = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=tBTCUSD&timeFrame=1D';
}
var candleChart = AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "value"
}],
color: "#7f8da9",
dataLoader: {
url: request,
format: 'json'
},
title: "tBTCUSD",
categoryField: "date"
}],
panels: [{
title: "Value",
showCategoryAxis: false,
percentHeight: 70,
valueAxes: [{
id:"v1",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
type: "candlestick",
id: "g1",
openField: "open",
closeField: "close",
highField: "high",
lowField: "low",
valueField: "close",
lineColor: "#7f8da9",
fillColors: "#7f8da9",
negativeLineColor: "#db4c3c",
negativeFillColors: "#db4c3c",
fillAlphas: 1,
useDataSetColors: false,
comparable: true,
compareField: "value",
showBalloon: false
}],
stockLegend: {
valueTextRegular: undefined,
periodValueTextComparing: "[[percents.value.close]]%"
}
},
{
title: "Volume",
percentHeight: 30,
marginTop: 1,
showCategoryAxis: true,
valueAxes: [{
id:"v2",
dashLength: 5
}],
categoryAxis: {
dashLength: 5
},
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
markerType: "none",
markerSize: 0,
labelText: "",
periodValueTextRegular: "[[value.close]]"
}
}
],
chartCursorSettings: {
valueLineEnabled:true,
valueLineBalloonEnabled:true
},
chartScrollbarSettings: {
graph: "g1",
graphType: "line",
usePeriod: "WW",
updateOnReleaseOnly:false
},
periodSelector: {
position: "bottom",
periods: [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
$(options)
function options() {
var handler = handleDropdown(handleResults)
handler('#time-frame-list', 'time')
handler('#currency-pair-list', 'currency')
}
function handleResults(results) {
var mainRequest = 'http://localhost:8080/v1/crypto/getCandles?currencyPair=t';
var resultsArray = JSON.stringify(results);
var currencyPair = resultsArray.substr(25,6);
var timeFrame = resultsArray.substr(9,2);
request = mainRequest + currencyPair + '&timeFrame=' + timeFrame;
candleChart.dataLoader.url = request;
candleChart.dataLoader.loadData();
console.log(request);
}
function handleDropdown(handler) {
var options = {}
return function(selector, key) {
options[key] = $(selector).val()
$(selector).change(function(event) {
options[key] = this.options[event.target.selectedIndex].value
handler(options)
})
}
}
내 HTML 코드 :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>amStock Example</title>
<link rel="stylesheet" href="style.css">
<script src="amcharts.js" type="text/javascript"></script>
<script src="serial.js" type="text/javascript"></script>
<script src="amstock.js" type="text/javascript"></script>
<script src="dataloader.min.js" type="text/javascript"></script>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="cryptoscript.js" type="text/javascript"></script>
</head>
<body style="background-color:#FFFFFF">
<center>
<div class="chart-background">
<div class="drop-down-menus">
<div class="time-frame-dropdown">
<select id="time-frame-list">
<option value="1D" selected>1D</option>
<option value="1h">1H</option>
</select>
</div>
<div class="currency-pair-dropdown">
<select id="currency-pair-list">
<option value="BTCUSD" selected>BTCUSD</option>
<option value="ETHUSD">ETHUSD</option>
</select>
</div>
</div>
</div>
<div id="chartdiv" class="chart-candle" style="width:50%; height:600px;"></div>
</div>
</center>
</body>
</html>
내 RestController :
내RestController을 받고 있음을 알 수
@RestController
@RequestMapping("v1/crypto")
public class CandleRestController {
@Autowired
private DbService service;
@Autowired
private CandleMapper candleMapper;
@RequestMapping(method = RequestMethod.GET, value = "getCandles")
public CandleDtoCharts[] getCandleList(@RequestParam String currencyPair, @RequestParam String timeFrame) {
System.out.println(currencyPair + " " + timeFrame);
return candleMapper.mapToCandleDtoChartsList(service.getCandlesByCurrencyPairAndTimeFrame(currencyPair, timeFrame));
}
}
항상 같은 "요청 "(url) 다른 통화 쌍/시간대를 선택한 후 왜 그런지 모르겠습니다.
작동 : D 대단히 감사합니다! 며칠 동안 해결책을 찾으려고했는데 ... 앞으로 나아갈 수 있습니다. :) – Olsson