0
私はこのhighchart例にスタックオーバーフローのユーザーへの感謝を持っている：動的に変更Firebase 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にしようとしているノードです。
ただし、データベース内の複数の日付はすべて含む同様のデータがあります。
私が知りたいことはある - ユーザーがボタンをクリックすることができる方法はあります - おそらく、ドロップダウンこれらの変更を反映するためにfirebase URLが更新されますか？
はそう言って、たとえば、デフォルトでは、このです：
var url="https://projectec-edbbb.firebaseio.com/Demo/2007.json";
しかし、ユーザーは、URLが示すように更新されたドロップダウンボックスから日付2009を選択したとき：
var url="https://projectec-edbbb.firebaseio.com/Demo/2009.json";
の場合誰もが、私はそれを本当に感謝任意のソリューションやアイデア
は、ありがとうを持って
G
ありがとう！このソリューションは完璧に機能します！ありがとうございました！ – GeorgeBT
なしPROB、ケア –