gpt4 book ai didi

javascript - 加速谷歌图表渲染或替代品

转载 作者:搜寻专家 更新时间:2023-11-01 05:11:11 27 4
gpt4 key购买 nike

所以我需要显示大约 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 秒。我可以在后端做些什么来加快速度,或者有人知道基于浏览器的图表是否可以更快地呈现吗?

最佳答案

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

一些更重量级的选项包括Highcharts , ZingChart ,以及 - 如果您准备好接受陡峭的学习曲线 - d3.js .

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

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

关于javascript - 加速谷歌图表渲染或替代品,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28203768/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com