Question

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

我想用这些数据绘制长时间内英镑价值的时间序列图。

我正在使用AJAX将数据填充到highcharts图表中，我的代码如下：

<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>

****返回

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]

如何使用此数据生成类似this

的highstocks折线图

Answer 1

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

如何从ajax数据绘制高压单线系列图

1 个答案: