自定义 amCharts 股票图表图例答案

【问题标题】：Customize the amCharts Stock Chart legend自定义 amCharts 股票图表图例
【发布时间】：2015-10-27 15:34:59
【问题描述】：

我使用带有比较功能的 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 的等效参数。

你能帮帮我吗？

【问题讨论】：

虽然这不会帮助您更改颜色或字体粗细，但valueFunction 实际上适用于主图和比较图。至于您的格式要求，恐怕没有办法做到这一点。
哦...但是我可以在 amCharts 的旧 Flash 版本中做到这一点。奇怪的是我不能用最近的。
不是用图表事件解决这个问题的方法吗？
传说不接受格式选项，恐怕。

标签： javascript amcharts amstock

【解决方案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 需要一些时间来更改 Legend 并且 javascript 事件对他来说太快了）。

【讨论】：