【发布时间】：2017-06-15 20:56:25
【问题描述】：
感谢堆栈溢出用户，我有这个 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 会更新以反映这些更改？
比如说默认是这样的：
var url="https://projectec-edbbb.firebaseio.com/Demo/2007.json";
但是当用户从下拉框中选择日期 2009 时，URL 会更新为显示：
var url="https://projectec-edbbb.firebaseio.com/Demo/2009.json";
如果有人有任何解决方案或想法，我将不胜感激
谢谢，
G
【问题讨论】：
标签： javascript jquery firebase highcharts firebase-realtime-database