如何绘制从阿贾克斯数据highstock一行序列图数据、序列图、阿贾克斯、highstock

2023-09-10 14:32:14 作者:一路向北

我有一个Rails应用程序,获取了英镑相比,从一个JSON API肯尼亚先令的价值的货币信息数据。

I have a rails app that fetches currency information data of the value of the sterling pound compared to the Kenyan shilling from a JSON API.

我想用这个数据来绘制英镑的值的时间序列图上的很长一段时间。

I want to use this data to plot a time-series graph of the value of the pound over a long period of time.

我使用AJAX的数据填充到highcharts图和我的code是如下:

I'm using AJAX to populate data to a highcharts chart and my code is as follows:

<div id="currency", style="width: 220px, height:320px">
  <script type="text/javascript">

$(document).ready(function(){
  localhost = {}; //global namespace variable
  localhost.currenctHTML = ""; //currency HTML built here
  localhost.currencyValue = []; //array of percentage changes
  localhost.currencyDate = []; //array of currency names
  localhost.chart1 = {yAxisMin : null, yAxisMax : null};//obj holds things belonging to chart1

   var url = '/forexes.json'

  $.ajax({
    url: url,
    cache: false,
    dataType: 'jsonp', //will set cache to false by default
    context: localhost,
    complete: function(data){

       var a=JSON.parse(data.responseText);

       // console.log(a);
       var data_mapped = a.map(function (data){
        return data.forex;
       }).map(function (data) {
        return {
            currencyDate: data.published_at,
            currencyValue: data.mean
        }
       });

       this.currencyDate = _.pluck(data_mapped, 'currencyDate');
       this.currencyValue = _.pluck(data_mapped, 'currencyValue');

       console.log(this.currencyDate);

      this.chart1.data.series[0].data = this.currencyValue;

      this.chart1.data.xAxis.categories = this.currencyDate;

      chart = new Highcharts.Chart(this.chart1.data);
    }
  });


     localhost.chart1.data = { //js single-threaded, this obj created before callback function completed
      chart: {
        renderTo: "currency"
      },
      title: {
        text: "Forex by Day"
      },

      xAxis: {
        categories: null, //will be assigned array value during ajax callback
        title: {
          text: null
        }
      },
      yAxis: {
        title: {
          text: "Pounds"
        }
      },
      tooltip: {
        formatter: function() {
          return Highcharts.dateFormat("%B %e, %Y", this.x) + ': ' +
            "$" + Highcharts.numberFormat(this.y, 2);
        }
      },
      series: [{
        name: 'Pound',
        data: null
      }
      ]
    }; 
});

  </script>
</div>

****回报

**** returns

this.chart1.data.xAxis.categories = ["2003-01-01T00:00:00.000Z", "2003-01-02T00:00:00.000Z", "2003-01-03T00:00:00.000Z", "2003-01-04T00:00:00.000Z", "2003-01-05T00:00:00.000Z"]

this.chart1.data.series[0].data = [147.653, 148.007, 147.971, 148.202, 148.384, 147.888]

我如何使用这些数据来生成highstocks线图类似这

推荐答案

在不能使用的类别,只有日期时间类型,所以你应该分析你的数据时间戳,并用它在数据highstock。

In the highstock you cannot use categories, only datetime type, so you should parse your data to timestamp and use it in the data.