Question

我目前正在尝试使用网络技术制作频率分析仪，尤其是Meteor。

目前，我尝试使用创建SVG图片的Google Charts库。图表需要每秒刷新大约10次，性能不满意。它占用了所有的CPU资源。

我对网络开发有点新兴（特别是在图形和表演问题上），所以如果你能指出正确的方向进行研究，我会很感激。

Answer 1

我最终使用的库 CanvasJs 似乎是最快的库之一。有一个选项interactivityEnabled: false可以禁用与图表的交互，从而提高性能。

即使没有直接的Meteor集成，只需将js文件放在./client/compatibility中，它就可以正常工作。

Answer 2

您可以使用ZingChart轻松完成此操作。我们还没有Meteor整合，但下面的演示应该是一个很好的开始。运行下面的代码段以查看它。

我是ZingChart团队的成员！如果您有疑问，请告诉我。

＆＃13;

var MAXVALUES = 100;
var myConfig = {
 type: "line", 
 series : [
   {
     values : []
   }
 ]
};

zingchart.render({ 
  id : 'myChart', 
  data : myConfig, 
  height: 400, 
  width: 600 
});


var myValues = [];

setInterval(function(){
  myValues.push( Math.floor(Math.random() * 10 ) );
  
  if(myValues.length == MAXVALUES+1){
    myValues.shift();
  }
  console.log(myValues)
  zingchart.exec('myChart', 'setseriesvalues', {
    values : [myValues]
  })
},60)

＆＃13;

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChart'></div>

＆＃13;

Answer 3

使用canvas元素。您应该能够每秒获得60个音频，如果它是音频源，则Audio API会提供用于频谱分析的DSP。

以下是audio spectrum visualizer

的示例

Javascript频率分析仪使用图表库

3 个答案: