我没有找到任何解决方法如何为XYAmChart的Y轴添加前缀/后缀。 XY图表类型中的labelFunction不支持valueAxes。有什么建议吗？
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"dataDateFormat": "DD-MM-YYYY",
"graphs": [
{
"id":"g8",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":0,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d-1-c2",
"yField":"p-1-c2",
"xAxis":"g8",
"balloonText":"<span style='font-size:18px;'>[[d-1-c2]]</span><br>07/1/2017-12/31/2017"
},
{
"id":"g8-copy1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":15,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d-1-c1",
"yField":"p-1-c1",
"xAxis":"g8-copy1",
"balloonText":"<span style='font-size:18px;'>[[d-1-c1]]</span><br>1/1/2017-6/29/2017"
}
],
"valueAxes": [
{
"id": "g8",
"axisAlpha": 1,
"gridAlpha": 1,
"axisColor": "#b0de09",
"color": "#b0de09",
"dashLength": 5,
"centerLabelOnFullp": true,
"position": "bottom",
"type": "date",
"minp": "DD-MM-YYYY",
"markPeriodChange": false,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
},
{
"id": "g8-copy1",
"gridAlpha": 0,
"axisAlpha": 1,
"centerLabelOnFullp": false,
"position": "bottom",
"offset": 40,
"type": "date",
"minp": "DD-MM-YYYY",
'markPeriodChange': false,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}
],
"dataProvider": [
{
"d-1-c2":"01/01/2017",
"p-1-c2":"5684.6400"
},{
"d-1-c2":"01/02/2017",
"p-1-c2":"6468.9600"
},{
"d-1-c2":"01/03/2017",
"p-1-c2":"9032.7600"
},{
"d-1-c2":"01/04/2017",
"p-1-c2":"6385.9200"
},{
"d-1-c2":"01/05/2017",
"p-1-c2":"10087.3900"
},{
"d-1-c2":"01/06/2017",
"p-1-c2":"6136.3300"
},
{
"d-1-c1":"01/07/2017",
"p-1-c1":"4659.7000"
},{
"d-1-c1":"01/08/2017",
"p-1-c1":"9719.7100"
},{
"d-1-c1":"01/09/2017",
"p-1-c1":"4789.7300"
},{
"d-1-c1":"01/10/2017",
"p-1-c1":"7448.3900"
},{
"d-1-c1":"01/11/2017",
"p-1-c1":"6202.7200"
},{
"d-1-c1":"01/12/2017",
"p-1-c1":"9274.0300"
},{
"d-1-c1":"01/01/2018"
},{
"d-1-c2":"01/07/2017"
}
]
});#chartdiv {
width: 100%;
height: 500px;
} <script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
答案 0 :(得分：0)
labelFunction绝对支持，如下所示。
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
} ],
演示：
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"balloon":{
"fixedPosition":true,
},
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": 8,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
} ],
"startDuration": 1.5,
"graphs": [ {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
} ]
} );html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
如果您的自定义标签没有，您还可以使用unit和unitPosition
需要通过labelFunction可以利用的任何其他逻辑。
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"unit": "unit-prefix:",
"unitPosition": "left"
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"unit": "unit-prefix:",
"unitPosition": "left"
} ],
下面的演示。
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"balloon":{
"fixedPosition":true,
},
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": 8,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"unit": "unit-prefix:",
"unitPosition": "left"
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"unit": "unit-prefix:",
"unitPosition": "left"
} ],
"startDuration": 1.5,
"graphs": [ {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
} ]
} );html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>