时间戳

首页 > 解决方案 > 带有ajax数据加载的Highcharts Windbarb

javascript - 带有ajax数据加载的Highcharts Windbarb

问题描述

好的。改写之前未回答的问题。

我有一个如下图所示的图表，其中数据通过 ajax 动态加载。此图的简化版本（没有 ajax）可以正常工作，如jsfiddle所示。

下面的代码是我使用它的图表，直接来自它的上下文。

在此处输入图像描述

这个想法是图中有几个时间序列（x 轴），我希望通过风刺显示这些时间的风速和风向特征。windbarbs 在每个定义的 x 值处采用两个参数，所有其他系列采用一个参数（y 轴）。

  1. 我的问题是：为什么它不起作用（为什么是 stackdump），而它在 jsfiddle 中起作用（没有 ajax 调用，因此没有 addSeries 调用？

  2. 作为派生：在 jsfiddle 中，onSeries 属性不起作用。那里有什么问题？

  3. 最后：是否有可能在系列图上方获得风刺而不是固定在 x 轴上？

问题似乎出在加载其他系列之后加载风数据。由于该部分在具有 (idx == 'wind') 条件的 ajax 调用中，因此很容易发现。它使用以下堆栈转储中断了 highStock 的 setData 调用：

Uncaught TypeError: r is undefined
setData highstock.src.js:33902
init highstock.src.js:33182
init highstock.src.js:54816
init windbarb.src.js:361
initSeries highstock.src.js:27886
addSeries highstock.src.js:36888
fireEvent highstock.src.js:2112
addSeries highstock.src.js:36887
success line 2 > injectedScript:176
success line 2 > injectedScript:171
jQuery 6
doSensorIn2p5 line 2 > injectedScript:162
SetGraphView0 line 2 > injectedScript:276
onclick (index):1

没有风数据它工作正常。

var doSensorIn10 = function(){
  let ReferenceColours = ['#79bc6a', '#bbcf4c', '#eec20b', '#f29305', '#960018' ];
  let ReferenceConcentrations10 = [0,25,50,90,180];
  let t ={chart: { renderTo: 'chartcontainerIn10',type: 'spline',alignTicks: false, zoomType: 'xy', pinchType: 'xy'},
  title: { text: 'AirQuality Sensor In for PM10'},
  credits: { enabled: true},
  xAxis: { type: 'datetime', ordinal: false, dateTimeLabelFormats: { day: '%e %b',week: '%e %b %y',month: '%b %y',year: '%Y'} },
  yAxis:
    [{
      title: { text: 'Luchtkwaliteit (μg/m3)'},
      opposite: false, labels: { align: 'right',x: -5},
    },
    {
      linkedTo: 0,
      gridLineWidth: 0,
      opposite: true,
      title: { text: null},
      labels: { align: 'left',x: 5},
      tickInterval: 20
    }],
  legend: { enabled: true},
  tooltip: { valueSuffix: 'μg/m3',valueDecimals: 1,xDateFormat: '%A, %b %e, %H:%M'},
  series:[],
  rangeSelector:
  {
    buttons:[{ count: 6,type: 'hour',text: '6h'},
             { count: 12,type: 'hour',text: '12h'},
             { type: 'all',text: 'All'}],
    inputEnabled: false
  }
};
let chart = new Highcharts.StockChart(t);
chart.showLoading();

$.ajax({
  url: 'airlinkdataIn10.json', 
  cache: false,
  dataType: 'json',
  success: function(resp){
    let titles = {
'In_pm10': 'In_pm10','In_pm10_1hr': 'In_pm10_1hr','In_pm10_3hr': 'In_pm10_3hr','In_pm10_24hr': 'In_pm10_24hr','In_pm10_nowcast': 'In_pm10_nowcast','wind': 'wind'}
    let idxs = ['In_pm10','In_pm10_1hr','In_pm10_3hr','In_pm10_24hr','In_pm10_nowcast','wind']
    let cnt = 0;
    idxs.forEach(function(idx) {
      console.log('idx =  ' + idx);
      if (idx in resp) {
        if (idx == 'wind') {
          console.log('Doing Wind correctly : Before addSeries');
          chart.addSeries({name: titles[idx], type: 'windbarb', showInLegend: false, onSeries: 'InPM2p5', tooltip: {valueSuffix: ' m/s'}, data: resp[idx] }, false);
          console.log('Doing Wind correctly : After addSeries');
        }
        else {
          console.log('Doing ' + idx + ' correctly');
          chart.addSeries({name: titles[idx], data: resp[idx]}, false);
        }
        chart.series[cnt].options.zIndex = cnt+50;
      }
      cnt++;
    });
    chart.hideLoading();
    chart.redraw();
  }
}
)};

数据系列（简称）如下：

{"In_pm2p5":[[1609484460000,26.20], ... ]],
 "In_pm2p5_1hr":[[1609484460000,32.90], ... ]],
 ...
 "wind":[[1609484460000,0.0,194], ...]]}

每个参数有 2880 个值，wind 可能少一个值（我在 jsfiddle 中测试过，似乎没有问题）。

标签： javascriptajaxhighcharts

解决方案

感谢您广泛而清晰的描述！

  1. 在这种情况下，如果不复制您的数据获取，就很难说为什么图表不能正确呈现。该功能应该可以正常工作，并且类型系列addSeries没有任何问题。windbarb

演示：https ://jsfiddle.net/BlackLabel/ktLyunw8/

2.

在 jsfiddle onSeries 属性不起作用。那里有什么问题？

我看不到它，一切似乎都很好： 在此处输入图像描述

3.

最后：是否有可能在系列图上方获得风刺而不是固定在 x 轴上？

就像在使用该onSeries功能的情况下一样？还是将其完全渲染在情节区域之上？

我想将它渲染在绘图区域上方或绘图区域的顶部（就像没有 onSeries 它在底部），所以所有的风刺都在一行中。

在这种情况下，您可以渲染第二个xAxis并将 winbarb 系列分配给它。

API：https ://api.highcharts.com/highcharts/xAxis.opposite

演示：https ://jsfiddle.net/BlackLabel/ud0kyrgh/

推荐阅读