Question

所以我需要显示大约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>

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

Answer 1

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

一些更重量级的选项包括Highcharts，ZingChart，以及 - 如果您已为陡峭的学习曲线做好准备 - d3.js。

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

如果您对此主题或ZingChart有任何疑问，请随时与我们联系。

Answer 2

使用arrayToDataTable（）可以获得更快的响应，只需将行推到其上即可构建单个数组，而不是一次添加一行30000 datatable.addRow（）调用。

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

2 个答案: