感谢堆栈溢出用户，我有了这个 highchart 示例:
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: {
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();<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 URL 会更新以反射(reflect)这些更改？
例如，默认值是这样的:
var url="https://projectec-edbbb.firebaseio.com/Demo/2007.json";
但是，当用户从下拉框中选择日期 2009 年时，URL 将更新为显示:
var url="https://projectec-edbbb.firebaseio.com/Demo/2009.json";
如果有人有任何解决方案或想法，我将非常感激
谢谢，
G
最佳答案
我认为这种和平的代码会对你有所帮助..
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">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<div id="container2" style="height: 400px"></div>关于javascript - 动态更改的 Firebase URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44567909/