自定義amCharts股票圖表圖例

Question

我將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參數，但Comparing卻沒有。

你能幫助我嗎？

Answer 1

好吧，我找到一種方法來做我想要的。 有點作弊，但是有效。 首先，我使用一個特定的字符來分隔值和百分比（此處為“ |”）：

stockLegend.periodValueText = '[[value.close]]|[[percents.value.close]]%';
stockLegend.valueTextComparing = '[[value]]|[[percents.value]]%';

之后，我在HTML中創建了另一個沒有amCharts的圖例：

<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>&nbsp;&nbsp;&nbsp;&nbsp;';
                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需要一點時間來更改圖例，而javascript事件對他來說太快了）。