amcharts version 3中如何绘制两个值的变化值
How to draw the change value of two values in amcharts version 3
我有三个值的数组:
- 估计值
- 实际值
- 它们的区别
我正在使用 amcharts 版本 3 库绘制平滑折线图。
我想绘制两条线之间的变化值。
例如:
如果估计值为 3,实际值为 5,则变化为 -2,所以我想将差异绘制为绿色。在其他情况下是红色的。
附上图片作为我想要的输出。
我看到了所有可用的 amcharts 演示,但没有找到我的匹配项。
如果有人帮助我获得线索,请提供给我使用演示数据。
我对 amcharts 不是很熟悉,所以样式不是很好。
但是为了在行之间添加列...
首先,这些线需要位于相同的值轴上。
否则,由于两种不同的比例,列的大小将不正确。
接下来是数据。我们需要三个堆积柱系列。
一个用于底部,透明部分。
另一个为红色,另一个为绿色。
在这里,我将数据保存在一个单独的变量中。
var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];
然后使用 map
方法计算三列的差值或值。
'dataProvider': chartData.map(function (row) {
if (row.ActualValue >= row.EstimatedValue) {
row.difference0 = row.EstimatedValue;
row.difference1 = row.ActualValue - row.EstimatedValue;
row.difference2 = 0;
} else {
row.difference0 = row.ActualValue;
row.difference1 = 0;
row.difference2 = row.EstimatedValue - row.ActualValue;
}
return row;
}),
请参阅以下工作片段...
$(document).ready(function() {
var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];
var AverageAnalystEstimatesChart;
AverageAnalystEstimatesChartgraphCounter = 2;
AverageAnalystEstimatesChart = AmCharts.makeChart('AverageAnalystEstimatesChart', {
'type': 'serial',
'dataProvider': chartData.map(function (row) {
if (row.ActualValue >= row.EstimatedValue) {
row.difference0 = row.EstimatedValue;
row.difference1 = row.ActualValue - row.EstimatedValue;
row.difference2 = 0;
} else {
row.difference0 = row.ActualValue;
row.difference1 = 0;
row.difference2 = row.EstimatedValue - row.ActualValue;
}
return row;
}),
'valueAxes': [{
'id':'v1',
'position': 'left',
'inside':false,
'autoGridCount' :false,
'labelOffset': 15,
'minHorizontalGap' : 100,
'gridCount' : 8,
'minimum': 0
},{
'id':'v6',
'position': 'right',
'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,
'minimum': 0,
'stackType': 'regular'
}],
'numberFormatter': {
'precision': 2,
'decimalSeparator': '.',
'thousandsSeparator': ''
},
'categoryField': 'FiscalPeriod',
'graphs': [{
'id': 'g0',
'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
'bullet': 'round',
'bulletSize': 0,
'lineColor': '#7CB5EC',
'lineThickness': 3,
'negativeLineColor': '#7CB5EC',
'type': 'smoothedLine',
'valueField': 'ActualValue',
'title': 'Actual Value',
'valueAxis': 'v4'
},{
'id': 'g1',
'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
'bullet': 'round',
'bulletSize': 0,
'lineColor': '#EE7B0A',
'lineThickness': 3,
'negativeLineColor': '#EE7B0A',
'type': 'smoothedLine',
'valueField': 'EstimatedValue',
'title': 'Estimated Value',
'valueAxis': 'v4'
},{
'id': 'g2',
'balloonText': '',
'fillAlphas': 0,
'lineThickness': 0,
'type': 'column',
'valueField': 'difference0',
'title': '',
'valueAxis': 'v7'
},{
'id': 'g3',
'balloonText': '',
'lineColor': 'green',
'fillAlphas': 1,
'type': 'column',
'valueField': 'difference1',
'title': 'Difference',
'valueAxis': 'v7'
},{
'id': 'g4',
'balloonText': '',
'lineColor': 'red',
'fillAlphas': 1,
'type': 'column',
'valueField': 'difference2',
'title': 'Difference',
'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
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<div id="AverageAnalystEstimatesChart" style="width: 100%; height: 362px;"></div>
我有三个值的数组:
- 估计值
- 实际值
- 它们的区别
我正在使用 amcharts 版本 3 库绘制平滑折线图。 我想绘制两条线之间的变化值。
例如:
如果估计值为 3,实际值为 5,则变化为 -2,所以我想将差异绘制为绿色。在其他情况下是红色的。
附上图片作为我想要的输出。
我看到了所有可用的 amcharts 演示,但没有找到我的匹配项。 如果有人帮助我获得线索,请提供给我使用演示数据。
我对 amcharts 不是很熟悉,所以样式不是很好。
但是为了在行之间添加列...
首先,这些线需要位于相同的值轴上。
否则,由于两种不同的比例,列的大小将不正确。
接下来是数据。我们需要三个堆积柱系列。
一个用于底部,透明部分。
另一个为红色,另一个为绿色。
在这里,我将数据保存在一个单独的变量中。
var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];
然后使用 map
方法计算三列的差值或值。
'dataProvider': chartData.map(function (row) {
if (row.ActualValue >= row.EstimatedValue) {
row.difference0 = row.EstimatedValue;
row.difference1 = row.ActualValue - row.EstimatedValue;
row.difference2 = 0;
} else {
row.difference0 = row.ActualValue;
row.difference1 = 0;
row.difference2 = row.EstimatedValue - row.ActualValue;
}
return row;
}),
请参阅以下工作片段...
$(document).ready(function() {
var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];
var AverageAnalystEstimatesChart;
AverageAnalystEstimatesChartgraphCounter = 2;
AverageAnalystEstimatesChart = AmCharts.makeChart('AverageAnalystEstimatesChart', {
'type': 'serial',
'dataProvider': chartData.map(function (row) {
if (row.ActualValue >= row.EstimatedValue) {
row.difference0 = row.EstimatedValue;
row.difference1 = row.ActualValue - row.EstimatedValue;
row.difference2 = 0;
} else {
row.difference0 = row.ActualValue;
row.difference1 = 0;
row.difference2 = row.EstimatedValue - row.ActualValue;
}
return row;
}),
'valueAxes': [{
'id':'v1',
'position': 'left',
'inside':false,
'autoGridCount' :false,
'labelOffset': 15,
'minHorizontalGap' : 100,
'gridCount' : 8,
'minimum': 0
},{
'id':'v6',
'position': 'right',
'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,
'minimum': 0,
'stackType': 'regular'
}],
'numberFormatter': {
'precision': 2,
'decimalSeparator': '.',
'thousandsSeparator': ''
},
'categoryField': 'FiscalPeriod',
'graphs': [{
'id': 'g0',
'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
'bullet': 'round',
'bulletSize': 0,
'lineColor': '#7CB5EC',
'lineThickness': 3,
'negativeLineColor': '#7CB5EC',
'type': 'smoothedLine',
'valueField': 'ActualValue',
'title': 'Actual Value',
'valueAxis': 'v4'
},{
'id': 'g1',
'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
'bullet': 'round',
'bulletSize': 0,
'lineColor': '#EE7B0A',
'lineThickness': 3,
'negativeLineColor': '#EE7B0A',
'type': 'smoothedLine',
'valueField': 'EstimatedValue',
'title': 'Estimated Value',
'valueAxis': 'v4'
},{
'id': 'g2',
'balloonText': '',
'fillAlphas': 0,
'lineThickness': 0,
'type': 'column',
'valueField': 'difference0',
'title': '',
'valueAxis': 'v7'
},{
'id': 'g3',
'balloonText': '',
'lineColor': 'green',
'fillAlphas': 1,
'type': 'column',
'valueField': 'difference1',
'title': 'Difference',
'valueAxis': 'v7'
},{
'id': 'g4',
'balloonText': '',
'lineColor': 'red',
'fillAlphas': 1,
'type': 'column',
'valueField': 'difference2',
'title': 'Difference',
'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
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<div id="AverageAnalystEstimatesChart" style="width: 100%; height: 362px;"></div>