在数组问题中存储 Highcharts
Posted
技术标签:
【中文标题】在数组问题中存储 Highcharts【英文标题】：Storing Highcharts in array issue 【发布时间】：2020-03-06 20:24:12 【问题描述】：我在一个循环中动态地绘制了许多 highcharts 并将每个 highchart 推送到一个数组中。因此，在单击外部按钮时，我可以导出图表。但是在将图表推送到数组时，只有最后一个条目是用选项正确设置的。
我参考了一个建议克隆选项的小提琴。 [https://jsfiddle.net/ndb21y1w/][2]
https://www.highcharts.com/forum/viewtopic.php?t=38574
小提琴在所有图表上绘制了相同的系列数据。如果填充的每个图表的数据不同，如何解决这个问题。感谢您提前提供任何帮助。
使问题更加清晰： 数据在循环中动态填充。我的代码逻辑是这样的：
counter i;
setInterval(function()
//logic to populated data...
//It is a multiline chart, so three sets of arrays are populated.
//filling data1[], data2[] and data3[] .
drawChart(data1, data2, data3);
if(condition true) clearInterval();
i++;
);
drawChart(data1, data2, data3)
var chart = new Highcharts.Chart(
title:
text: "title",
,
xAxis:
categories: [1,2,3,4...],
,
series: [
type: 'line',
data: data1,
,
type: 'line',
data: data2,
,
type: 'line',
data: data3,
,
);
chartArray.push(chart);
这个 chartArray 是我提到的正确获取最后一个条目的地方。
【问题讨论】：
最后你想导出数据库列中的数据，或者你想导出为文件（即pdf，csv等）？ （你想要什么选项） 似乎是id 的问题。你也可以发布导出图表方法吗？
@ShantanuSharma 导出为单个 pdf。
我发现如果我们只使用同一个容器，克隆选项后会出现这个问题。无论如何，所有图表都可以重复使用相同的容器。
【参考方案1】：
要创建图表，您必须传递一个将成为图表容器的 html 元素。在您的代码中缺少什么。查看我准备重现此问题的演示：https://jsfiddle.net/BlackLabel/c60y1t2v/
代码：
var chartArray = [],
counter = 1,
dataArr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
],
containers = document.getElementById('containers');
function drawChart(data)
var cnt = document.createElement('div'),
cntId = 'container' + counter++,
chart;
cnt.setAttribute('id', cntId);
containers.appendChild(cnt);
chart = new Highcharts.Chart(cntId,
title:
text: "title",
,
xAxis:
categories: [1, 2, 3, 4],
,
series: [
type: 'line',
data: data,
]
);
return chart;
dataArr.forEach(function(data)
var chart = drawChart(data);
chartArray.push(chart);
);
【讨论】：
这里所有的图表选项都没有包含在代码中，所以我没有提到renderTo容器选项。无论如何，我的要求是每隔 3 秒在同一个容器中显示一些图表。 在同一个容器中创建新图表时，旧图表将被销毁。这可能是问题所在。 是的，当然，所以我想在不同的重叠容器中绘图。你能建议任何其他标准的做事方式吗？ 在不同的重叠容器中绘制图表的结果是什么？对于每个图表，您有不同或相同的选项吗？你能在像 jsfiddle 这样的在线代码编辑器中重现你的问题吗？【参考方案2】：您需要在每次使用新图表时定义选项。每次创建新图表时重新初始化 OriginalOptions。
const options = [...Array(5)].map(() =>
const originalOptions =
series: [
data: [], // some random data
type: 'column'
]
return Object.assign(originalOptions)
)
Fiddle
更新：
为了动态重新填充图表，您必须初始化一个空图表，然后在填充数据时添加新系列 + 重绘。
您的重绘函数将如下所示：
var i = 0;
var data = [];
var chart = new Highcharts.Chart('container',
series: []
);
var interval = setInterval(function()
i++;
data[i] = [i*10 + 1, i*10+2, i*10+3];
drawChart(data[i]);
if(i > 2) clearInterval(interval);
,1000);
function drawChart(data)
var series =
type: 'line',
data: data
chart.addSeries(series, false);
chart.redraw();
See Updated Fiddle
【讨论】：
数据在一个区间内动态填充。 您想在填充所有数据时显示图表还是在填充每个数据集时显示图表？ 当每组定期填充时。请查看包含的更新代码。 所以在这种情况下，您需要重新绘制图表。查看更新的答案 那么这里存储图表的数组是什么？而且只有一张图表填充【参考方案3】：要将HTML打印为PDF，您可以使用此软件“wkhtmltopdf”
在 Linux 中你需要使用这个命令：
sudo apt-get install wkhtmltopdf
有很多基于“wkhtmltopdf”的多种语言的库，所以你可以使用它。
PHP 库：https://github.com/mikehaertl/phpwkhtmltopdf
【讨论】：
【参考方案4】：将图表选项存储在 Array 中，然后映射到每个选项的 Initialize Highchart。
var chartArray = [];
function drawChart(data1, data2, data3, i)
// Create container for charts
const el = document.createElement('div');
document.body.appendChild(el).setAttribute("id", "container"+i);
// Create charts
var chart = new Highcharts.chart(el,
series: [
type: 'line',
data: data1,
,
type: 'line',
data: data2,
,
type: 'line',
data: data3,
]
);
chartArray.push(chart);
console.log(chartArray);
var counter = 0;
var delayTime = 2000;
var timer = setInterval(function()
var data1 = [30, 70, 50];
var data2 = [40, 70, 60];
var data3 = [10, 90, 20];
drawChart(data1, data2, data3, counter);
if(counter == 2)
clearInterval(timer);
counter++;
,delayTime);<script src="https://code.highcharts.com/highcharts.js"></script>【讨论】：
是否有相同的容器可以重复用于所有图表。比如 Highcharts.chart('my-graph-area',o) 您想在一个容器中放置多个图表吗？有间隔计时。 即使是现在，也是加载到同一个容器中的图表，所以存入数组时，无法正确获取。在不同的容器中绘制重叠每个容器是一种解决方法。您能提出更好的解决方案吗 我在sn-p上面编辑过。图表在不同的容器中绘制并存储到chartArray。检查控制台以获取 chartArray 值。
如果它在这里不起作用。将此JS 代码放入您的fiddle 并检查。以上是关于在数组问题中存储 Highcharts的主要内容，如果未能解决你的问题，请参考以下文章