XY Amcharts 的 Y 轴标签前缀

Question

我没有找到任何解决方案如何为 XYAmChart 的 Y 轴添加前缀/后缀。 valueAxes 在 XY 图表类型中似乎不支持 labelFunction。有什么建议吗？

			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>

Answer 1

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>