如何从Ajax数据绘制高库存单线系列图

Question

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.

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]

How do I use this data to generate a highstocks line chart resembling this

Answer 1

在highstock中，您不能仅使用类别，而只能使用日期时间类型，因此您应该将数据解析为时间戳并在数据中使用它。