我使用amCharts'具有比较功能的股票图表。我使用StockLegend对象作为图例,我想自定义valueTextComparing
参数。实际上,我有这个:
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]]%';
我想要的是为[[percents.value]]
设置两种不同的颜色,将值设为正或负(并在所有valueTextComparing
上添加粗体效果)。
我在文档中看到valueFunction
参数,但不是比较的等价物。
你能帮助我吗?
答案 0 :(得分:0)
好的,我找到了一种方法来做我想做的事。这有点作弊,但它的工作。 首先,我使用特定字符来分隔值和百分比(此处为“|”):
stockLegend.periodValueText = '[[value.close]]|[[percents.value.close]]%';
stockLegend.valueTextComparing = '[[value]]|[[percents.value]]%';
之后,我在HTML中创建了另一个没有amCharts的Legend:
<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>
然后,我创建了一个更改此图例的功能:
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;
}
});
}
最后,当图表选择改变时,我调用此函数:
chart.addListener("zoomed", function(event){
parseLegend($);
});
当鼠标移动时,将鼠标悬停在图表上:
$('.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);
});
(我使用了超时,因为amCharts花了一些时间来更改Legend并且javascript事件对他来说太快了。)