Javascript 在数组问题中存储高位图表

我在一个循环中动态绘制了许多highchart，并将每个highchart推送到一个数组中。这样，在单击外部按钮时，我可以导出图表。但在将图表推送到数组时，只有最后一个条目正确设置了选项

我提到一把小提琴，它建议复制选项<代码>[

][2]

fiddle在所有图表上绘制了相同的系列数据。如果填充的每个图表的数据不同，如何解决此问题。提前谢谢你的帮助

使问题更加明确：

---

数据在循环中动态填充。我的代码逻辑如下：

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就是我提到的只正确获取最后一个条目的地方。

每次使用新图表时，都需要定义选项。每次创建新图表时重新初始化原始选项

const options = [...Array(5)].map(() => {
  const originalOptions = {
    series: [{
      data: [], // some random data
      type: 'column'
    }]
  }
  return Object.assign(originalOptions)
})

更新：

要动态重新填充图表，必须初始化空图表，然后在填充数据时添加新的序列+重画

您的重画函数将如下所示：

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();
}

---

将图表选项存储在

数组中

然后映射到初始化每个选项的Highchart

var chartary=[]；
功能绘图图（数据1、数据2、数据3、i）{
//为图表创建容器
const el=document.createElement（'div'）；
document.body.appendChild（el.setAttribute）（“id”，“container”+i）；
//创建图表
var图表=新的高点图表。图表（el{
系列：[{
键入：“行”，
数据：数据1，
}, {
键入：“行”，
数据：数据2，
}, {
键入：“行”，
数据：数据3，
}]
});
chartArray.push（图表）；
log（chartArray）；
}
var计数器=0；
var delayTime=2000；
var timer=setInterval（函数（）{
VarData1=[30,70,50]；
VarData2=[40,70,60]；
VarData3=[10,90,20]；
绘图图（数据1、数据2、数据3、计数器）；
如果（计数器==2）{
清除间隔（计时器）；
}
计数器++；
}，延迟时间）
要将HTML打印为PDF您可以使用此软件“wkhtmltopdf”

在Linux中，您需要使用以下命令：

sudo apt-get install wkhtmltopdf

在许多语言中有许多基于“wkhtmltopdf”的库，因此您可以使用它


PHP库：
要创建图表，必须传递一个HTML元素，该元素将作为图表容器。在您的代码中，缺少什么。查看我准备复制此问题的演示：

代码：

最后，您希望导出数据库列中的数据，还是希望导出为文件（即pdf、csv等）？（您想要的选项）似乎是
id
的问题。你能不能也发布导出图表方法。@ShantanuSharma将导出为单个pdf。我发现，如果我们只使用同一个容器，则在克隆选项后会出现此问题。是否仍然可以对所有图表重复使用同一容器。数据以一定间隔动态填充。是否希望在填充所有数据时显示图表，还是在填充每个集合时显示图表？是否在定期填充每个集合时显示图表。请查看包含的更新代码。因此，在本例中，您需要重新绘制图表。请参阅此处更新的答案。存储图表的数组是哪一个？而且这里只填充了一个图表，所有的图表选项都没有包含在这里的代码中，所以我没有提到renderTo容器选项。无论如何，我的要求是在同一容器中以3秒的固定间隔显示一些图表。当在同一容器中创建新图表时，旧图表将被销毁。这可能是个问题。是的，当然，所以我想到在不同的重叠容器中绘图。你能推荐其他的标准方法吗？在不同的重叠容器中绘制图表的结果是什么？每个图表有不同或相同的选项吗？你能在像JSFIDLE这样的在线代码编辑器中重现你的问题吗？是否有相同的容器可以用于所有图表。像Highcharts.chart（'my-graph-area'，o）您希望在一个容器中包含多个图表吗？使用间隔计时。即使是现在，也要将它加载到相同的容器图表中，以便在存储到数组中时，无法正确获取它。在不同的容器中打印，每个容器重叠是一种解决方法。你能推荐一个更好的解决方案吗？我已经编辑了上面的片段。图表在不同容器中打印并存储到
chartArray
。检查控制台以获取
chartArray
值。如果它在此处不起作用。将此
JS
代码放入您的应用程序并检查。
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);
});