HighChart不使用多轴

时间:2018-05-17 11:46:10

标签: highcharts

我想构建多个y轴样条Highchart,但我在系列中得到Null。 当我手动使用数据以便它工作正常,但是当我从URL获取数据时,它不起作用。另外,我将准备一个用于创建多个y轴的函数。 我可以帮助我在哪里错了吗?

这是我的代码

<script type="text/javascript">

        var axisdata = [{url:"",text:"", yAxis: 1, scrollbar: true,type: "spline"},
            {url:"", text:"", yAxix: 2, scrollbar:true, type: "spline"}];

        var HighChartObj = {
           title: {
             text: 'Exchange Rates'
           },
           scrollbar: {
             enabled: true,
             showFull: false
           },
           yAxis: [],
           series: [],
           rangeSelector: {
             selected: 1,
             buttonTheme: {
               visibility: 'hidden'
             },
             labelStyle: {
               visibility: 'hidden'
             },
             inputDateFormat: '%H:%M:%S.%L'
           },
        };

        function a(){
          var defer = $.Deferred();
          z = -1;
          var axisLength = axisdata.length - 1;
          jQuery.each(axisdata, function(key, value){
            $.getJSON( value.url, function (data) {
              var dataLength = data.length,
              i = 0;
              minValue = data[0].open;
              maxValue = data[0].open;
              var finalData = [];
              var new_from_date = 0;
              var new_to_date = 0;
              var minValue;
              var maxValue;

              for (i; i < dataLength; i += 1) {
                if(i == (dataLength + 99 - dataLength)){
                new_to_date = (data[i].start*1000);
                }  

                finalData.push([
                  (data[i].start*1000),
                  data[i].open,

                ]);

                if (data[i].open < minValue) {
                  minValue = data[i].open;
                }
                else{
                  if(data[i].open > maxValue){
                    maxValue = data[i].open;
                  }
                }
              } 

              HighChartObj.xAxis = {
                type: 'datetime',
                min: new_from_date,
                max: new_to_date,
                range: new_to_date - new_from_date,
                ordinal: false,
                endOnTick: false,
                startOnTick: false
              };
              z++;  
              HighChartObj.yAxis[z] = {
                title: {
                  text: value.text
                },
                  opposite: true,
                  min: minValue,
                  max: maxValue,
                  height: "100%",
                  scrollbar: {
                    enabled: value.scrollbar
                  }
              };
              var series = {
                "type": value.type,
                "name": value.text,
                "yAxis": value.yAxis,
                "id": value.text.toLowerCase().replace(' ', ''),
                "zIndex": 1,
                "data": finalData
              };
              if(HighChartObj.series == null){
                HighChartObj.series = new Array();
              }
                HighChartObj.series[z] = series;

                if(key == axisLength){
                  defer.resolve();
                }
            });
          });
          return defer.promise();
        }
        function b(){
           // console.log(HighChartObj.series = HighChartObj.test);
          console.log(HighChartObj);
          Highcharts.stockChart('container', HighChartObj);
        }
        $.when(a()).then(b());
      </script>

1 个答案:

答案 0 :(得分:0)

尝试获取此类数据。请将数据放在不同的变量中,然后将其传递给HighChart对象。

function a(){
            z = -1;
            var axisLength = axisdata.length - 1;
            var dataSeries = new Array()
            var dataYaxis = new Array();
            jQuery.each(axisdata, function(key, value){
              var axisValue = value;
              $.ajax({
                dataType: "json",
                url: axisValue.url,
                success: function (data) {
                  var dataLength = data.length,
                  i = 0;
                  minValue = data[0].open;
                  maxValue = data[0].open;
                  var finalData = [];
                  var new_from_date = 0;
                  var new_to_date = 0;
                  var minValue;
                  var maxValue;

                  for (i; i < dataLength; i += 1) {
                    if(i == (dataLength + 99 - dataLength)){
                      new_to_date = (data[i].start*1000);
                    }  
                    var date = (data[i].start*1000);
                    finalData.push([
                      date,
                      data[i].open,
                    ]);

                    if (data[i].open < minValue) {
                      minValue = data[i].open;
                    }
                    else{
                      if(data[i].open > maxValue){
                        maxValue = data[i].open;
                      }
                    }
                  } 

                  z++;

                  HighChartObj.xAxis = {
                    type: 'datetime',
                    min: new_from_date,
                    max: new_to_date,
                    range: new_to_date - new_from_date,
                    ordinal: false,
                    endOnTick: false,
                    startOnTick: false
                  };

                  var yAxis = {
                    title: {
                      text: axisValue.text
                    },
                    opposite: false,
                    min: minValue,
                    max: maxValue,
                    height: "100%",
                    scrollbar: {
                      enabled: axisValue.scrollbar
                    }
                  };

                  dataYaxis.push(yAxis);

                  var series = {
                    type: axisValue.type,
                    name: axisValue.text,
                    id: axisValue.text.toLowerCase().replace(' ', ''),
                    zIndex: 2,
                    data: finalData
                  };

                  dataSeries.push(series);

                  if(key == axisLength){
                    HighChartObj.yAxis = dataYaxis;
                    HighChartObj.series = dataSeries;
                    b();
                  }
                }
              });
            });
         }