加快谷歌图表渲染或替代方案

Question

所以我需要显示大约 30,000 个数据点的基本图表，我目前正在使用 Google Charts，并在 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

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

更多重量级选项包括Highcharts、ZingChart，以及 - 如果您准备好迎接陡峭的学习曲线 - d3.js。

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

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

Answer 2

您可以通过使用arrayToDataTable() 获得更快的响应，为它提供一个您只需将行推送到其上即可构造的单个数组，而不是通过 30000 个 datatable.addRow() 调用一次添加一行。