为什么 HighCharts 只写入我的动态 div 之一？
Why is HighCharts only writing to one of my dynamic div's?
我正在尝试使用 highcharts 创建一些图表，并使用动态 div 这样做。
第一张图成功了，其他都是空白。查看 html 来源，我认为一切正常。
这是我动态创建的 div：
<!-- Break Down of all Signature names in each class -->
<% n = 0 %>
<% @sig_class_name_info.each do |scn_chart| %>
<div>
<%= scn_chart[:sig_class_name] %>
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart<%=+n%>" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<%n = n+1%>
<% end %>
这是 html 创建的来源：
<!-- Break Down of all Signature names in each class -->
<div>
web-application-attack
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart0" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
attempted-admin
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart1" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
misc-attack
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart2" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
policy-violation
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart3" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
这是 highcharts 脚本：
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function(renderId, title, data, x_axis) {
var config = {};
config.chart = {
renderTo: renderId,
defaultSeriesType: 'column',
margin: [50, 50, 100, 80]
};
new Highcharts.Chart ({
chart: {
type: 'bar',
renderTo: renderId
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/ips_alert_classes?query=',
color: '#2a2874'
}]
});
}
<% n = 0%>
<% @sig_class_name_info.each do |i| %>
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart<%=+n%>",<%= raw i[:sig_class_name].to_json.html_safe %>,<%= raw i[:event_name_count].to_json.html_safe %>,<%= raw i[:event_name].to_json.html_safe %>)
))
<% n = n+1%>
<% end %>
});
</script>
这是此 highcharts 脚本的 html 来源：
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function(renderId, title, data, x_axis) {
var config = {};
config.chart = {
renderTo: renderId,
defaultSeriesType: 'column',
margin: [50, 50, 100, 80]
};
new Highcharts.Chart ({
chart: {
type: 'bar',
renderTo: renderId
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/ips_alert_classes?query=',
color: '#2a2874'
}]
});
}
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart0", "web-application-attack", [919,1,1,1], ["drop - WP-Admin attempt","Snort Alert [1:16431:5]","Snort Alert [1:19438:9]","drop - SQL use of concat function with select - likely SQL injection"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart1", "attempted-admin", [1,10,4], ["Snort Alert [1:31976:4]","drop - SERVER-OTHER Wordpress linenity theme LFI attempt","drop - OS-OTHER Bash CGI environment variable injection attempt"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart2", "misc-attack", [1], ["drop - SQL union select - possible sql injection attempt - GET parameter"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart3", "policy-violation", [2], ["drop - POLICY-OTHER Adobe ColdFusion admin interface access attempt"])
))
});
</script>
如您所见，charts.push(new Highcharts.Chart() 脚本似乎按预期工作。
什么会导致第一个图表显示正常，但其余图表为空白？
更新：
这是有效的 HighCharts 设置。
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function (renderId, title, data, x_axis) {
var config = {
chart: {
renderTo: renderId,
defaultSeriesType: 'bar'
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
//location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/signatures?query=',
color: '#2a2874'
}]
};
return config;
}
<% n = 0%>
<% @sig_class_name_info.each do |i| %>
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart<%=n%>"
,<%= raw i[:sig_class_name].to_json.html_safe %>
,<%= raw i[:event_name_count].to_json.html_safe %>
,<%= raw i[:event_name].to_json.html_safe %>)
))
<% n = n+1%>
<% end %>
});
</script>
一件重要的事情：您创建每个图表两次，第一次是在调用 getChartConfig 时，第二次是在推送到图表数组之前。所以我建议更改：
仅推送图表：
charts.push(getChartConfig(...))
并在 getChartConfig 方法中，return 创建了图表：
return new Highcharts.Chart ({ ... });
我正在尝试使用 highcharts 创建一些图表，并使用动态 div 这样做。
第一张图成功了，其他都是空白。查看 html 来源，我认为一切正常。
这是我动态创建的 div：
<!-- Break Down of all Signature names in each class -->
<% n = 0 %>
<% @sig_class_name_info.each do |scn_chart| %>
<div>
<%= scn_chart[:sig_class_name] %>
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart<%=+n%>" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<%n = n+1%>
<% end %>
这是 html 创建的来源：
<!-- Break Down of all Signature names in each class -->
<div>
web-application-attack
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart0" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
attempted-admin
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart1" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
misc-attack
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart2" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
policy-violation
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart3" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
这是 highcharts 脚本：
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function(renderId, title, data, x_axis) {
var config = {};
config.chart = {
renderTo: renderId,
defaultSeriesType: 'column',
margin: [50, 50, 100, 80]
};
new Highcharts.Chart ({
chart: {
type: 'bar',
renderTo: renderId
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/ips_alert_classes?query=',
color: '#2a2874'
}]
});
}
<% n = 0%>
<% @sig_class_name_info.each do |i| %>
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart<%=+n%>",<%= raw i[:sig_class_name].to_json.html_safe %>,<%= raw i[:event_name_count].to_json.html_safe %>,<%= raw i[:event_name].to_json.html_safe %>)
))
<% n = n+1%>
<% end %>
});
</script>
这是此 highcharts 脚本的 html 来源：
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function(renderId, title, data, x_axis) {
var config = {};
config.chart = {
renderTo: renderId,
defaultSeriesType: 'column',
margin: [50, 50, 100, 80]
};
new Highcharts.Chart ({
chart: {
type: 'bar',
renderTo: renderId
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/ips_alert_classes?query=',
color: '#2a2874'
}]
});
}
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart0", "web-application-attack", [919,1,1,1], ["drop - WP-Admin attempt","Snort Alert [1:16431:5]","Snort Alert [1:19438:9]","drop - SQL use of concat function with select - likely SQL injection"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart1", "attempted-admin", [1,10,4], ["Snort Alert [1:31976:4]","drop - SERVER-OTHER Wordpress linenity theme LFI attempt","drop - OS-OTHER Bash CGI environment variable injection attempt"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart2", "misc-attack", [1], ["drop - SQL union select - possible sql injection attempt - GET parameter"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart3", "policy-violation", [2], ["drop - POLICY-OTHER Adobe ColdFusion admin interface access attempt"])
))
});
</script>
如您所见，charts.push(new Highcharts.Chart() 脚本似乎按预期工作。
什么会导致第一个图表显示正常，但其余图表为空白？
更新：
这是有效的 HighCharts 设置。
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function (renderId, title, data, x_axis) {
var config = {
chart: {
renderTo: renderId,
defaultSeriesType: 'bar'
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
//location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/signatures?query=',
color: '#2a2874'
}]
};
return config;
}
<% n = 0%>
<% @sig_class_name_info.each do |i| %>
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart<%=n%>"
,<%= raw i[:sig_class_name].to_json.html_safe %>
,<%= raw i[:event_name_count].to_json.html_safe %>
,<%= raw i[:event_name].to_json.html_safe %>)
))
<% n = n+1%>
<% end %>
});
</script>
一件重要的事情：您创建每个图表两次，第一次是在调用 getChartConfig 时，第二次是在推送到图表数组之前。所以我建议更改：
仅推送图表：
charts.push(getChartConfig(...))
并在 getChartConfig 方法中，return 创建了图表：
return new Highcharts.Chart ({ ... });