使用图表库的Javascript频率分析器

Question

我目前正在尝试使用网络技术，特别是Meteor制作一个频率分析器。

现在，我尝试使用创建SVG图片的Google库。该图表需要刷新大约10次，在第二，其表现并不令人满意。它占用了所有的CPU资源。

我对网络开发(尤其是在图形和性能方面)有点陌生，所以如果你能指出正确的方向来做我的研究，我会很感激的。

Answer 1

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

即使还没有直接的Meteor集成，只要将js文件放到./client/compatibility中就可以了。

Answer 2

您可以很容易地使用ZingChart来完成这一任务。我们还没有一个Meteor集成(还)，但下面的演示应该是一个很好的开端。运行下面的片段，以查看它的实况。

我是ZingChart队的成员！如果你有问题请告诉我。

​

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)

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

​

Answer 3

使用画布元素。您应该能够获得60每秒，如果它是一个音频源，音频API提供了一个DSP进行频谱分析。

下面是一个示例音频频谱可视化器