最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

google chart与百度echart比较

JavaScript AZ 3765浏览 0评论

lALOBiA38s0Des0DsA_944_890前几天因为要做个硬件调试实时图表,刚开始朋友推荐百度eChart。看了觉得效果很酷,在项目中使用了。到实际测试数据时,发现很占CPU。经过优化后,占用率还是较高,而且心跳50ms会有此bug。于是又google下,发现谷歌也有chart图表插件。

lALOBiBf_80Bec0GPA_1596_377

可是问题来了,谷歌只有在线的,中国境内你懂的!!离线传送门,自己只整理了line这块功能。

google chart 性能比百度的稳定,配置也简单方便。

示例:

  1. google.setOnLoadCallback(test);
  2. var chart;
  3. var chartOptions;
  4. var chartCreate;
  5. function test() {
  6. chart = new google.visualization.DataTable();
  7. chart.addColumn('number', '测试');
  8. chart.addColumn('number', '线一');
  9. chart.addColumn('number', '线二');
  10. for (var i = 0; i < 30; ++i) {
  11. chart.addRow([i, Math.random(i, 100) * 100, Math.random(i, 60) * 100]);
  12. }
  13. chartOptions = {
  14. title: "模拟测试",
  15. subtitle:'ll',
  16. explorer: {
  17. actions: ["dragToZoom", "rightClickToReset"],
  18. maxZoomOut: 10,
  19. keepInBounds: true
  20. },
  21. backgroundColor: '#f1f8e9'
  22. };
  23. chartCreate = new google.visualization.LineChart(document.getElementById('main'));
  24. chartCreate.draw(chart, chartOptions);
  25. }
  26. //动态加数据
  27. function addData() {
  28. chart.removeRows(0, 30);
  29. for (var i = 0; i < 30; ++i) {
  30. chart.addRow([i, Math.random(-i, 500) * 1000, Math.random(i, 60) * 100]);
  31. }
  32. chartCreate.draw(chart, chartOptions);
  33. }

转载请注明:TUTERM.COM » google chart与百度echart比较

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!