javascript - Customize the amCharts Stock Chart legend -
i use amcharts' stock chart comparison function. use stocklegend object legend , want customize valuetextcomparing
parameter. actually, have :
var stocklegend = new amcharts.stocklegend(); stocklegend.markertype = 'bubble'; stocklegend.markersize = 8; stocklegend.horizontalgap = 1; stocklegend.spacing = 100; stocklegend.periodvaluetext = '[[value.close]]'; stocklegend.valuetextcomparing = '[[value]] | [[percents.value]]%';
what want have 2 different colors [[percents.value]]
switch value positive or negative (and add bold effect on valuetextcomparing
).
i see in documentation valuefunction
parameter, not equivalent comparing.
can me?
ok find way want. it's bit cheating it's work. first, use specific character separate value , percent (here "|") :
stocklegend.periodvaluetext = '[[value.close]]|[[percents.value.close]]%'; stocklegend.valuetextcomparing = '[[value]]|[[percents.value]]%';
after that, created legend without amcharts in html :
<div id="graph_second_legend"> <div id="gsl_0_circle"></div> <div id="gsl_0"></div> <div id="gsl_1"></div> <div id="gsl_2_circle"></div> <div id="gsl_2"></div> <div id="gsl_3"></div> </div>
then, created function change legend :
function parselegend($){ $('.amchartslegend text').each(function(index){ switch(index){ case 0: var text = $(this).text(); var content = '<span class="graph_fund_label">' + text + '</span>'; $('#gsl_'+index).html(content); break; case 2: var text = $(this).text(); var content = '<span class="graph_index_label">' + text + '</span>'; $('#gsl_'+index).html(content); break; default: var text = $(this).text().split('|'); var negative = text[1].split('-'); var negaclass = ''; if(negative.length > 1){ negaclass = ' negative'; } var content = '<span class="graph_vl_amount">' + text[0] + '</span> '; content = content + '<span class="graph_vl_percent' + negaclass + '">' + text[1] + '</span>'; $('#gsl_'+index).html(content); break; } }); }
and finally, call function when graph selection changed :
chart.addlistener("zoomed", function(event){ parselegend($); });
and when mouse moving hover graph :
$('.amchartspanel').mouseover(function(){ settimeout(function(){parselegend($);}, 10); }); $('.amchartspanel').mouseout(function(){ settimeout(function(){parselegend($);}, 10); }); $('.amchartspanel').mousemove(function(){ settimeout(function(){parselegend($);}, 10); }); $('.amchartspanel').mouseleave(function(){ settimeout(function(){parselegend($);}, 10); });
(i used timeout because amcharts take moment change legend , javascript events fast him).
Comments
Post a Comment