我使用高图,所以,用户可以关闭并打开图表页面并重绘图表,在某些情况下给我这个错误,我该如何修复它,谢谢 这是我的代码
function populateGraph(graph1data1,graph1data2,id,time,bottomText,tickinterval){
$(function () {
$('#'+id).highcharts({
chart: {
type: 'line'
},
xAxis: {
tickWidth: 0,
categories: ['1,2,3,4']
},
yAxis: {
gridLineColor: '#fff',
title: {
text: ''
},
labels: {
formatter: function() {
return '';
}
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [{
name: 'This ',
data: [1,2,3,4],
color: '#1e71ef'
}, {
name: 'Last ',
data: [5,6,7,8],
color:'#dfe0e1'
}]
});
});
}
}
function loadOnlineDashboardChannel(channel){
$.ajax({
type: "get",
dataType: 'html',
data: {},
url: "/companies/2/online_dashboard_channel",
success: function(data, status){
var obj = JSON.parse(data);
var template_data = {
measures_list:
obj.measures
};
$(function() {
var tmplHTML_measures = '{{#measures_list}} <div class="col-lg-11 col-lg-offset-1"><p class="indicator-title gray-bottom-border">{{name}}</br></p><div><p><span class="font30px">{{total}} </span> Total {{name}}<br><span class="green-text">{{increase}}%</span> from last <span class="metric_time"></span></p></div><div class="graph-header"><h3>{{this_interval}} </h3><p>New {{name}}</p><p class="percentage-graph green-text">{{percentag e}}%<p></div><div id={{graph_id}} class="graph"></div> </div>{{/measures_list}}';
Handlebars.render = function(tmpl, data){data = data || {};return Handlebars.compile(tmpl)(data);};
$("#template").empty().append(Handlebars.render(tmplHTML_measures,template_data) );
var data_graph;
for ( var i = 0; i < obj.measures.length; i++ ) {
data_graph=obj.measures[i];
populateGraph(data_graph.this_interval_detail,data_graph.last_interval_detail,data_graph.graph_id,time,obj.bottom_graph_text,parseInt($('#timeframe-select').find(":selected").attr('interval')) );
}
})
},
error: function(error) {
}
});
return this;
};
我在这部分使用车把 在 var tmplHTML_measures 我创建了div,在for我调用函数绘制图表。
谢谢,我有时会重复它完美无缺,有时会失败,给我错误#13
答案 0 :(得分:11)
我遇到了同样的错误,我得知的是,当HighCharts.js尝试访问DOM中不存在的元素时,会出现错误#13。
我是如何修理的? 我确保只有在DOM中创建目标元素后才会调用HightCharts方法。答对了!!!!一切都很好。
答案 1 :(得分:6)
我遇到了同样的问题并使用正确的容器修复了它:
就我而言,我使用了以下内容:
// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
// Create standard Highcharts chart with options:
Highcharts.chart('Charts', {
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},....
}.....
}
Template.body.helpers({
createChart: function () {...}
并在HTML文件中:
<div id='Charts'>
{{createChart}}
</div>
我从Highcharts找到了修复程序:http://forum.highcharts.com/viewtopic.php?f=9&t=15610
问候。
答案 2 :(得分:1)
类别需要是一个集合,它是这样的:
categories: xaxis
将其更改为:
categories: ['xaxis']
某些数据字段需要用单引号括起来,如下所示:
data: 'blue'
这是一个没有任何错误的小提琴:
祝其他人好运。 :)
ps我有时会发现从highcharts网站编辑工作小提琴并根据您的需要调整它更容易。像这样:
答案 3 :(得分:1)
也许聚会晚了一点,但是在Highcharts示例中,容器的默认名称是'container'。浏览器似乎不喜欢这样,也许名称冲突,将其更改为“图表”就可以了。
答案 4 :(得分:0)
另外,请确保在HTML中声明“highcharts-more.js”。
<td width="200px">
<select class="w3-select" name="<?= $addTech['employeeID'] ?>-duration" id="duration-<?= strval($addTech['employeeID']) ?>">
<option value="">Select</option>
<option value=".5">.5 hr</option>
<option value="1">1 hr</option>
<option value="1.5">1.5 hrs</option>
<option value="2">2 hrs</option>
<option value="2.5">2.5 hrs</option>
<option value="3">3 hrs</option>
<option value="3.5">3.5 hrs</option>
<option value="4">4 hrs</option>
</select>
</td>
<td width="200px"><input class="w3-input w3-hover-grey" type="text" name="<?= $addTech['employeeID'] ?>-promDate" value="" id="promDate-<?= strval($addTech['employeeID']) ?>">
<script type="text/javascript">
$(document).on('change', "#duration-<? strval($addTech['employeeID']) ?>", function() {
var displayDate = "<?= $displayDate ?>";
$(textID).val(displayDate);
});
</script>
</td>
答案 5 :(得分:0)
对我来说,当我在HTML元素之后放置调用script
时,错误已解决。
像;
<div id="container"></div>
<script>
Highcharts.chart('container', {
// some script here
});
</script>
另外,如果您在高图表网站上查看,则说:
This error occurs if the chart.renderTo option is misconfigured so that
Highcharts is unable to find the HTML element to render the chart in.
答案 6 :(得分:0)
我在文档就绪功能之后加载了脚本代码,并且运行良好。
$(document).ready(function(){
});
答案 7 :(得分:0)
我也遇到了相同的错误代码,但就我而言,原因是我的数据太大而无法支持
答案 8 :(得分:0)
这是一个古老的问题,但我认为所有答案都不能令人满意。
我建议在渲染图表之前进行检查以确保图表div存在。
if($('#'+id).length){ $('#'+id).highcharts({});}
答案 9 :(得分:0)
Highcharts 找不到指定的 div ID
。它通常发生在库尝试渲染图表但尚未在 DOM 中创建 div 时。
您必须调试您的代码,并尝试在 Highcharts 需要使用它时找到该元素是否存在于您的网站上的信息。 >