[英]Multiple charts with same data not loading in same page: Highcharts
I am trying to display Highchart having same data in custom no.我正在尝试在自定义编号中显示具有相同数据的 Highchart。 of times, Say I want to display the chart 2 times in same pagedynamically.
有时,假设我想在同一页面中动态显示图表 2 次。
What I have done is that I set the chart in for loop in which I can repeat the chart multiple times dynamically.我所做的是将图表设置在 for 循环中,在该循环中我可以动态地多次重复图表。
Here is the Script That I have tried.这是我尝试过的脚本。
var len = 2 ;
var chartArea = document.getElementById("content");
for(var i=0;i<len;i++)
{
console.log("I", i);
chartArea.innerHTML +=
'<div id="container'+i+'"></div>';
var categories = ["1","2","3","4","5","6","7","8","9","10"];
Highcharts.stockChart('container'+i, {
rangeSelector: {
enabled: false
},
xAxis: {
labels: {
formatter: function() {
return categories[this.value];
}
}
},
navigator: {
xAxis: {
labels: {
formatter: function() {
return categories[this.value];
}
}
}
},
plotOptions: {
series: {
animation: {
duration: 2000
},
marker:{
enabled: false
}
}
},
series: [{
data: [3,5,3,6,2,6,4,9,4,6]
}]
});
But the problem is that only last graph shows the line chart.但问题是只有最后一张图显示了折线图。 the other first chart have the x-axis labels bu the line graph is not showing.
另一个第一个图表有 x 轴标签,但折线图没有显示。
Here is the Fiddle That I have tried.这是我尝试过的小提琴。
http://jsfiddle.net/abnitchauhan/cenmohbw/ http://jsfiddle.net/abnitchauhan/cenmohbw/
You forgot to append the child to the DOM tree.您忘记将孩子附加到 DOM 树。 When you create a new HTML element dynamically, it needs to be attached to an existing node in the DOM tree.
动态创建新的 HTML 元素时,需要将其附加到 DOM 树中的现有节点。
In Javascript you can do:在 Javascript 中,您可以执行以下操作:
var existingNode = document.getElementById("content");
var newElement = document.createElement("div");
newElement.id = "someID";
existingNode.appendChild(newElement);
In jQuery, its more easy:在 jQuery 中,它更容易:
$("#content").append(`<div id="someID"></div>`);
In your case, the change would look like (only for
loop changes) as:在您的情况下,更改看起来像(仅
for
循环更改)为:
for (var i = 0; i < len; i++) {
console.log("I", i);
$("#content").append(`<div id="container${i}"></div>`);
// rest of your code
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.