加快 google 图表渲染或替代方案

Question

所以我需要显示大约 30,000 个数据点的基本图表，我目前正在使用 Google 图表，其中包含 javascript 中的以下代码，其中包含一些 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

您可能会通过使用 arrayToDataTable() 获得更快的响应，通过将行推到它来为其构造一个数组，而不是一次添加一行 30000 datatable.addRow() 调用。

Answer 2

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

一些更重量级的选项包括Highcharts, ZingChart, and - if you're ready for a steep learning curve - d3.js。

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

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

加快 google 图表渲染或替代方案

speeding up google charts rendering or alternatives

javascript

optimization

google-visualization