Question

我正在使用Java，Spring，Hibernate和AmCharts库开发基于REST架构和CRUD假设的应用程序。

但在我的项目中，我遇到了从AmCharts重新加载蜡烛图（股票图表）数据的问题。

我的JavaScript代码：

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
@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));
    }
}

我知道我的RestController在选择其他货币对/时间框架之后一直收到相同的“请求”（网址），我不知道为什么？

Answer 1

您必须更新url内的dataLoader dataSet。您在图表级别对其进行了更新，而这在图表级别中无效。

candleChart.dataLoader.url = request; //this doesn't work in a stock chart
candleChart.dataSets[0].dataLoader.url = request; //this does.

如何在蜡烛图中重新加载数据？ AmChart图书馆

1 个答案: