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

How to plot a highstock single line series graph from ajax data

本文关键字:高股票 单线 系列 绘制 数据 ajax      更新时间:2023-09-26

我有一个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]

我如何使用这些数据来生成类似于下面的高点折线图

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