动态多变的火力地堡URL
问题描述：
我有这个highchart例如由于堆栈溢出用户：动态多变的火力地堡URL
var formatterCountryNames = function() {
// if mobile
if (jQuery('#country-names').length) {
return this.point.CountryCode
} else {
return this.point.Country
}
};
function draw_chart() {
var url="https://projectec-edbbb.firebaseio.com/Demo/2007.json";
$.getJSON(url,
function(data){
/** Declare options after success callback. */
var options={
chart: {
renderTo: 'container2',
//margin: [0, 0, 0, 0],
marginTop: 0,
marginRight: 0,
marginLeft: 70,
spacing: [0,0,30,0],
//marginBottom: 0,
type: 'bubble',
zoomType: 'xy',
events: {
// load: renderImage
}
},
legend: {
enabled: false
},
title: {
\t text: null
},
xAxis: {
labels: {
enabled: false
},
tickPositions: [2.3, 4.4, 6.5, 10],
min: 0,
max: 10,
align: 'low',
gridLineWidth: 1,
title: {
text: 'Government Restrictions Index <strong>(GRI)</strong>',
x: -30,
y: 20,
style: {
color: "#000",
fontWeight: 300
}
},
},
yAxis: {
tickInterval: 0.2,
min: 0,
max: 10,
gridLineWidth: 1,
startOnTick: false,
endOnTick: false,
//values: [1.4, 3.5, 7.1, 10],
title: {
x: -35,
y: 20,
text: 'Social Hostilities Index <strong>(SHI)</strong>',
style: {
color: "#000",
fontWeight: 300
}
},
labels: {
formatter: function() {
return this.value + ' %';
}
},
maxPadding: 0.2,
},
tooltip: {
followPointer: false,
useHTML: true,
backgroundColor: '#fff',
borderColor: '#000'
// formatter: formatterToolTips,
// positioner: toolTipsPositioning
},
plotOptions: {
bubble: {
minSize: '7.5%'
},
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: formatterCountryNames,
allowOverlap: true,
strokeWidth: '0',
textOutline: 'false',
shadow: 'false',
textShadow: 'false',
// adds class to all labels
className: 'className'
},
allowPointSelect: true,
states: {
hover: {
// gets rid of halo on hover
halo: {
/** size: 5,
attributes: {
fill: '#333',
'stroke-width': 1,
stroke: '#fff',
zIndex: '1000'
} **/
size: 0
}
}
},
marker: {
fillOpacity: 1.0,
states: {
hover: {
// gets rid of outline of marker on hover
lineWidth: 0,
// changes markers color on hover
//fillColor: '#000'
},
select: {
\t fillColor: '#000',
\t lineWidth: 0
}
}
},
point: {
events: {
//click: formatterPointEventsClickFunction,
fillColor: '#000'
// mouseOver: markerMouseOver,
// mouseOut: markerMouseOut
}
}
}
},
series: [{
events: {
// mouseOut: markerMouseOut
},
data: data,
marker: {
// gets rid of default marker outlines
lineWidth: 0,
// overriding the above to show markers that collide
lineWidth: 2,
lineColor: '#fff',
}
}],
exporting: {
enabled: false
}
};
/** Create a chart instance and pass options. */
var chart = new Highcharts.Chart(options);
}
);
}
draw_chart();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container2" style="height: 400px"></div>，这里是一个截屏给它被用来填充数据的想法图表：
正如你可以看到，图像显示数据在'2007'节点下 - 这也是highchart图形在firebase URL中寻找的节点。
然而，在数据库中有多个日期均含有类似的数据：
我想知道的是 - 有没有一种方法，用户可以点击一个按钮 - 向下或许下降2007 - 2015年的日期，以及Firebase网址更新以反映这些更改？
所以说，例如默认的是这样的：
var url="https://projectec-edbbb.firebaseio.com/Demo/2007.json";
但是，当用户从下拉框，然后在URL更新以显示选择日期2009：
var url="https://projectec-edbbb.firebaseio.com/Demo/2009.json";
如果任何人有任何解决方案或想法，我真的很感激它
谢谢，
摹
答
我认为这个代码的和平将帮助你..
var formatterCountryNames = function() {
// if mobile
if (jQuery('#country-names').length) {
return this.point.CountryCode
} else {
return this.point.Country
}
};
function draw_chart(y) {
var url = "https://projectec-edbbb.firebaseio.com/Demo/" + y + ".json";
$.getJSON(url,
function(data) {
/** Declare options after success callback. */
var options = {
chart: {
renderTo: 'container2',
//margin: [0, 0, 0, 0],
marginTop: 0,
marginRight: 0,
marginLeft: 70,
spacing: [0, 0, 30, 0],
//marginBottom: 0,
type: 'bubble',
zoomType: 'xy',
events: {
// load: renderImage
}
},
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
labels: {
enabled: false
},
tickPositions: [2.3, 4.4, 6.5, 10],
min: 0,
max: 10,
align: 'low',
gridLineWidth: 1,
title: {
text: 'Government Restrictions Index <strong>(GRI)</strong>',
x: -30,
y: 20,
style: {
color: "#000",
fontWeight: 300
}
},
},
yAxis: {
tickInterval: 0.2,
min: 0,
max: 10,
gridLineWidth: 1,
startOnTick: false,
endOnTick: false,
//values: [1.4, 3.5, 7.1, 10],
title: {
x: -35,
y: 20,
text: 'Social Hostilities Index <strong>(SHI)</strong>',
style: {
color: "#000",
fontWeight: 300
}
},
labels: {
formatter: function() {
return this.value + ' %';
}
},
maxPadding: 0.2,
},
tooltip: {
followPointer: false,
useHTML: true,
backgroundColor: '#fff',
borderColor: '#000'
// formatter: formatterToolTips,
// positioner: toolTipsPositioning
},
plotOptions: {
bubble: {
minSize: '7.5%'
},
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: formatterCountryNames,
allowOverlap: true,
strokeWidth: '0',
textOutline: 'false',
shadow: 'false',
textShadow: 'false',
// adds class to all labels
className: 'className'
},
allowPointSelect: true,
states: {
hover: {
// gets rid of halo on hover
halo: {
/** size: 5,
attributes: {
fill: '#333',
'stroke-width': 1,
stroke: '#fff',
zIndex: '1000'
} **/
size: 0
}
}
},
marker: {
fillOpacity: 1.0,
states: {
hover: {
// gets rid of outline of marker on hover
lineWidth: 0,
// changes markers color on hover
//fillColor: '#000'
},
select: {
fillColor: '#000',
lineWidth: 0
}
}
},
point: {
events: {
//click: formatterPointEventsClickFunction,
fillColor: '#000'
// mouseOver: markerMouseOver,
// mouseOut: markerMouseOut
}
}
}
},
series: [{
events: {
// mouseOut: markerMouseOut
},
data: data,
marker: {
// gets rid of default marker outlines
lineWidth: 0,
// overriding the above to show markers that collide
lineWidth: 2,
lineColor: '#fff',
}
}],
exporting: {
enabled: false
}
};
/** Create a chart instance and pass options. */
var chart = new Highcharts.Chart(options);
}
);
}
draw_chart('2007');
$('#drp').on('change', function(el){
draw_chart($(this).val());
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<select id="drp">
\t <option value="2007">2007</option>
\t <option value="2008">2008</option>
\t <option value="2009">2009</option>
\t <option value="2010">2010</option>
\t <option value="2011">2011</option>
\t <option value="2012">2012</option>
\t <option value="2013">2013</option>
\t <option value="2014">2014</option>
\t <option value="2015">2015</option>
</select>
<div id="container2" style="height: 400px"></div>
答
这应该为你做的伎俩：
var formatterCountryNames = function() {
// if mobile
if (jQuery('#country-names').length) {
return this.point.CountryCode
} else {
return this.point.Country
}
};
function draw_chart(url) {
var url=url;
$.getJSON(url,
function(data){
/** Declare options after success callback. */
var options={
chart: {
renderTo: 'container2',
//margin: [0, 0, 0, 0],
marginTop: 0,
marginRight: 0,
marginLeft: 70,
spacing: [0,0,30,0],
//marginBottom: 0,
type: 'bubble',
zoomType: 'xy',
events: {
// load: renderImage
}
},
legend: {
enabled: false
},
title: {
\t text: null
},
xAxis: {
labels: {
enabled: false
},
tickPositions: [2.3, 4.4, 6.5, 10],
min: 0,
max: 10,
align: 'low',
gridLineWidth: 1,
title: {
text: 'Government Restrictions Index <strong>(GRI)</strong>',
x: -30,
y: 20,
style: {
color: "#000",
fontWeight: 300
}
},
},
yAxis: {
tickInterval: 0.2,
min: 0,
max: 10,
gridLineWidth: 1,
startOnTick: false,
endOnTick: false,
//values: [1.4, 3.5, 7.1, 10],
title: {
x: -35,
y: 20,
text: 'Social Hostilities Index <strong>(SHI)</strong>',
style: {
color: "#000",
fontWeight: 300
}
},
labels: {
formatter: function() {
return this.value + ' %';
}
},
maxPadding: 0.2,
},
tooltip: {
followPointer: false,
useHTML: true,
backgroundColor: '#fff',
borderColor: '#000'
// formatter: formatterToolTips,
// positioner: toolTipsPositioning
},
plotOptions: {
bubble: {
minSize: '7.5%'
},
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: formatterCountryNames,
allowOverlap: true,
strokeWidth: '0',
textOutline: 'false',
shadow: 'false',
textShadow: 'false',
// adds class to all labels
className: 'className'
},
allowPointSelect: true,
states: {
hover: {
// gets rid of halo on hover
halo: {
/** size: 5,
attributes: {
fill: '#333',
'stroke-width': 1,
stroke: '#fff',
zIndex: '1000'
} **/
size: 0
}
}
},
marker: {
fillOpacity: 1.0,
states: {
hover: {
// gets rid of outline of marker on hover
lineWidth: 0,
// changes markers color on hover
//fillColor: '#000'
},
select: {
\t fillColor: '#000',
\t lineWidth: 0
}
}
},
point: {
events: {
//click: formatterPointEventsClickFunction,
fillColor: '#000'
// mouseOver: markerMouseOver,
// mouseOut: markerMouseOut
}
}
}
},
series: [{
events: {
// mouseOut: markerMouseOut
},
data: data,
marker: {
// gets rid of default marker outlines
lineWidth: 0,
// overriding the above to show markers that collide
lineWidth: 2,
lineColor: '#fff',
}
}],
exporting: {
enabled: false
}
};
/** Create a chart instance and pass options. */
var chart = new Highcharts.Chart(options);
}
);
}
draw_chart("https://projectec-edbbb.firebaseio.com/Demo/2007.json");
//attaching chart update for the dropdown
$("#dateSelection").on("change", function() {
var value = this.children[this.selectedIndex].value;
var url = "https://projectec-edbbb.firebaseio.com/Demo/" + value +".json";
draw_chart(url)
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<select id="dateSelection">
<option selected value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>
<div id="container2" style="height: 400px"></div>+0
这个答案很好用 - 谢谢！可悲的是，我已经将@KresimirPendic标记为已接受，但是这个工作也很棒 – GeorgeBT
感谢您的快速回答！这个解决方案非常完美谢谢！ – GeorgeBT
没有问题，小心 –