加快谷歌图表渲染或替代品

Question

加快谷歌图表渲染或替代品

cli*_*ray 4 javascript optimization google-visualization

因此,我需要显示大约30,000个数据点的基本图表,我目前正在使用带有以下代码的Google Charts,其中包含一些jinja:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1.1', {packages: ['line']});
        google.setOnLoadCallback(drawChart);

        function drawChart() {

          var data = new google.visualization.DataTable();
          data.addColumn('number', 'Time');
          data.addColumn('number', "value1");
          data.addColumn('number', "value2");
          var mnemonic_count = 1;
          {% for item in response %}
            data.addRow([mnemonic_count, {{item["value1"] | safe}}, {{item["value2"] | safe}}]);
            count = count+1;
          {% endfor %}

          console.log(count);

          var options = {
            chart: {
              title: 'value over time',
              subtitle: 'count . ' data points'
            },
            width: 900,
            height: 500
          };

          var chart = new google.charts.Line(document.getElementById('linechart_material'));
          chart.draw(data, options);
        }
    </script>

<html>
    <div id="linechart_material"></div>
</html>

Run Code Online (Sandbox Code Playgroud)

这对于小数据集来说效果很好,它从来没有真正失败但是当我得到我需要的数据点数量时,大约30,000加载需要将近30秒.我可以在后端做些什么来加快速度,或者有人知道基于浏览器的图表能否更快地渲染？

Answer 1

Roc*_*cks 7

不幸的是,一些图表库并不是为了处理大数据集而构建的.如果您自己的优化没有成功,那么切换到另一个库可能是最好的解决方案.

一些更重量级的选项包括Highcharts,ZingChart,和-如果你已经准备好了一个陡峭的学习曲线- d3.js.

我在ZingChart团队,我们使用一些常见的库构建了渲染速度演示.它可能有助于您了解使用不同数据集的正常渲染时间.请记住,交互式功能和图表元素的数量/类型(除了数据点)也会影响速度.请注意,库/渲染测试的某些组合可能会导致页面中断或锁定浏览器.我们允许这样做以证明真实的行为.

如果您对该主题或ZingChart有任何疑问,请随时与我们联系.

归档时间：	10 年，11 月前
查看次数：	3496 次
最近记录：	10 年，11 月前