如何在运行时根据amcharts中的值填充列颜色?

问题描述 投票:0回答:1

我有一个使用第3版amcharts的柱形图,我已经将json保存在表中,并且柱形的颜色是蓝色,但是我知道我可以将negativecolorfill属性用作负值,但是我的概率不同,我如果值>> 50或enter image description here

var MultipleRatiosChartgraphCounter;


                      MultipleRatiosChartgraphCounter = 1;
                        MultipleRatiosChart = AmCharts.makeChart('MultipleRatiosChart', {
                        'type': 'serial',
                        'dataProvider': [{"FiscalPeriod":"2018-Q3","ColumnName":-9.708357,"Compare":""},{"FiscalPeriod":"2018-Q2","ColumnName":-16.946984,"Compare":""},{"FiscalPeriod":"2018-Q1","ColumnName":-29.700253,"Compare":""},{"FiscalPeriod":"2017-Q4","ColumnName":-58.804182,"Compare":""},{"FiscalPeriod":"2017-Q3","ColumnName":17.184930,"Compare":""},{"FiscalPeriod":"2017-Q2","ColumnName":15.511767,"Compare":""},{"FiscalPeriod":"2017-Q1","ColumnName":14.118273,"Compare":""},{"FiscalPeriod":"2016-Q4","ColumnName":64.801549,"Compare":""},{"FiscalPeriod":"2016-Q3","ColumnName":13.158462,"Compare":""},{"FiscalPeriod":"2016-Q2","ColumnName":58.494138,"Compare":""},{"FiscalPeriod":"2016-Q1","ColumnName":14.345279,"Compare":""},{"FiscalPeriod":"2015-Q4","ColumnName":13.240941,"Compare":""},{"FiscalPeriod":"2015-Q3","ColumnName":13.141208,"Compare":""}],
                        'valueAxes': [{
                        'id':'v1',
                        'position': 'left',
                        'inside':false,
                         'autoGridCount' :false,
                        'labelOffset': 15,
                      'minHorizontalGap' : 100,
                        'gridCount' : 8,

                        },{
                        'id':'v6',
                        'position': 'left',
                        'inside':false,
                         'autoGridCount' :false,
                        'labelOffset': 15,
                      'minHorizontalGap' : 100,
                        'gridCount' : 8,

                        },{
                        'id':'v5',
                        'position': 'left',
                        'inside':false,
                        'labelOffset': 15,
                        'autoGridCount' :false,
                        'gridThickness': 0,
                        },{
                        'id':'v3',
                        'position': 'left',
                        'inside':true,
                        'labelOffset' : 15,
                        'minHorizontalGap' : 120,
                        'minVerticalGap' : 50,
                        'autoGridCount' :false,
                        'gridThickness': 0,

                        'showFirstLabel' : false,
                        },
                        {
                        'id':'v4',
                        'position': 'left',
                        'inside':false,
                        'labelOffset': 15,
                        'autoGridCount' :false,
                        'gridCount' : 8,
                        'minimum': 0
                        },{
                        'id':'v7',
                        'position': 'left',
                        'inside':false,
                        'labelOffset': 15,
                        'autoGridCount' :false,
                        'gridCount' : 8,
                        },],
                        'numberFormatter': {
                        'precision': 2,
                        'decimalSeparator': '.',
                        'thousandsSeparator': ''
                        },
                        'categoryField': 'FiscalPeriod',
                        'graphs': [{    'id': 'g0',  'labelText' : '[[value]]',   'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',    'fillAlphas': 0.9,    'lineAlpha': 0.2,    'fillColors': '#89BCEE',    'type': 'column',    'valueField': 'ColumnName',    'title': 'P/E Before Unusual Items',    'valueAxis': 'v7'    }],
                        'chartCursor': {
                        'categoryBalloonDateFormat': 'DD-MM-YYYY',
                        'cursorAlpha': 0,
                        'valueLineEnabled': true,
                        'valueLineBalloonEnabled': true,
                        'valueLineAlpha': 0.5,
                        'categoryBalloonColor': '#E2EEF6',
                        'color': '#000'
                        },
                        'categoryAxis': {
                        'parseDates': false,
                        'minHorizontalGap':110,

                        'axisColor': '#fff','labelRotation': 45,'minorGridEnabled': true,'autoGridCount': false,'gridCount':8 , 'labelOffset' : 10
                        },
                        'legend': {
                        'position': 'bottom',
                        'equalWidths': false,
                        'useGraphSettings': true,
                        'valueAlign': 'middle',
                        'valueWidth': 300
                        },

                        });

这是我的工作代码https://jsfiddle.net/vwtfxzch/2/

javascript charts amcharts
1个回答
0
投票

这将起作用:

© www.soinside.com 2019 - 2024. All rights reserved.