个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个网页，可以定期加载 Highcharts 图表 - 就像循环播放幻灯片一样。我的问题是，运行几个小时后，Chrome 中的网络崩溃(目前无法选择其他浏览器)，并显示“噢，啪!显示此网页时出现问题。”
使用“Chrome开发工具->时间轴”我可以看到“DOM节点数”不断增加。(还有文档数)。
这是一个更大的网络的一部分，所以我无法发布代码。不过，我创建了一个以类似方式执行操作的页面。我使用 JQuery.load() 加载图表。
旋转纯 HTML 页面时，DOM 计数不会增加(被垃圾收集)。
请有人告诉我我做错了什么？我可以用不同的方式来做吗？这是 Highcharts 的错误吗？欢迎提出有关如何解决此问题的任何建议。
下面是一些可以产生此行为的代码。 (抱歉我无法让它在 jsfiddle 中工作)(在“$(document).ready”函数中注释和取消注释以在加载方法之间进行更改)
我已将此页面放在这里:http://memoryleak.ivarragnarsson.com您可以在其中选择查看泄漏的 Highcharts 版本或标准 HTML 加载非泄漏版本。
“内存泄漏.html”
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript">
function UpdateGraphsDiv()
{
if (typeof window.chart != 'undefined')
{
window.chart.destroy();
}
$.ajaxSetup({ cache: false, async: false });
$("#chartcontainer").load("graph.html");
}
$(document).ready(function ()
{
UpdateGraphsDiv(); setInterval(UpdateGraphsDiv, 5000); //Updates graph in div using JQuery Load
});
</script>
</head>
<body>
<div id="chartcontainer"></div>
</body>
</html>
“图.html”
<div id='container1' style='min-width: 310px; height: 400px; margin: 0 auto'></div>
<script type='text/javascript'>
$(function ()
{
$('#container1').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style=""font-size:10px"">{point.key}</span><table>',
pointFormat: '<tr><td style=""color:{series.color};padding:0"">{series.name}: </td>' +
'<td style=""padding:0""><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
</script>
</div>
请告诉我如何停止 DOM 节点的累积。
最佳答案
按照约定，调用chart.destroy()解决了大部分DOM节点增加的问题。根据 Ivar 的示例，我可以看到它不依赖于 Highcharts(参见附图) - 看起来 jQuery.load() 没有正确清理以前的内容。
左:无图表 ||右:有图表
关于javascript - 加载 Highcharts 文档时 DOM 节点计数增加 (Chrome)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18785583/
26
4
0
如何将导出模块包含到 angular2 应用程序中？ 我尝试将以下脚本添加到 index.html 但没有任何反应。 最佳答案 从 Angular CLI 1.0-RC.1 和最新的 angular
我正在为 Web 应用程序使用 HighCharts Javascript 库。当我下载 Highchart 时，我需要 Highchart 水印图像。 我正在使用普通的 hicgchart 代码。
我是 highcharts 的新手。默认情况下，Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示，并显示在与内部显示相同的位置。有帮助吗？ 最佳答案 您可以定义自己的 d
我正在尝试使用日期时间格式的数据创建 highcharts 热图。数据以小时为单位，持续数天。我不希望图表每天都环绕，但希望所有数据都在一条线上。 具体来说，它用于显示每小时的云量百分比，因此每个热图
我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本: 并在图表中添加属性: export :true, navigat
我很想知道为什么按钮 2 在这个 example 中不起作用 在这个 jsfiddle 示例中，附加到按钮 1 的“更新”方法正在运行，但在我的原始代码中，“更新”也不起作用。它显示错误:“对象# 没
我正在尝试在 highcharts 中编辑工具提示的边框。 我遇到的问题是我只想显示底部边框。 例如，您可以执行以下操作: tooltip: {borderWidth: 10}//但问题是在整个工具提
Highcharts的十字线可以显示在面积图的顶部而不是隐藏在其下方吗？ 这是问题jsfiddle.net/hHjZb/1286/的示例 最佳答案 更新: Highcharts现在已经实现了the O
在将图表导出为PNG时，我试图在饼图上添加图例。 这是我的代码: var chart_23_106; $(document).ready(function () { chart_23_106 = ne
带三角规的半圆饼 如何在图表顶部创建带有三角形仪表的上述半圆饼图。 我的车速表可以工作，但不能满足需要。 在highchart api中有没有办法使用三角形作为仪表，而不是车速表？ 谢谢 最佳答案 这
我们使用的是Highchart气泡图，但是，当气泡x和y在图中位于同一位置且气泡y较小时，将无法看到或单击得很少的气泡。 有什么方法可以先绘制较大的气泡，然后在顶部绘制较小的气泡？还是说较小的始终位于
是否可以使用百分比设置 Highcharts 的宽度？每当调整页面大小时，图表应具有足够的响应速度以适合页面大小吗？ One Solution 这里的问题是我有3个图表需要并排显示，每次调整页面大小时
我在更新基本列 Highcharts 时遇到问题。 我从服务器返回的 json 数组是: [{"name":"positive","data":[18,35,32,38]},{"name":"nega
有没有办法创建重叠的列？ 例如在 this jsFiddle ，蓝色和红色列应如下所示相互重叠，蓝色在后面，红色在前面。 澄清一下，我不想要堆叠的列，蓝色和红色列都应该从 xAxis (y=0) 开始
如何自定义图例 从 对此 最佳答案 查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身) legend: {
我正在尝试使用模式作为列范围以允许条形图工作。 图案出现但不使用预定义的图案，所以它只是纯蓝色。通常它使用已定义的条纹图案，并在散点图等上完美运行。 这是一个片段，展示了我的意思: Highchar
我正在使用 HighStock JS 库生成一个图表，该图表使用 xAxis 的线性序列(不是时间序列)。 我仍然想使用范围选择器来缩放到我的线性系列中的预定范围。这可能吗？ 例如；说我的 xAxis
我需要从一个系列向下钻取到多个系列。但是下钻 id 在一个系列上似乎是唯一的，这意味着我无法从单个系列下钻到多个系列；只有一个。我该如何解决这个问题？ 最佳答案 可以使用 chart.addSingl
我制作了一个带有分组和堆叠列的Highcharts图表，就像在这里的示例http://www.highcharts.com/demo/column-stacked-and-grouped一样。该示例显
如何在 highcharts/highstock 中将滚动条位置设置为Left？ 如图表加载时的图像所示， 滚动条自动右对齐。 有没有办法将它定位到左侧？ 最佳答案 我们可以通过将 min 设置为 0
我是一名优秀的程序员,十分优秀！