在图表应用中一般情况下Y轴都是采用数字标签,客户很多时候需要对这些数字进行各种格式化或者是加上各种直观的度量衡,如温度、长度、货币单位等,
AnyChart JavaScript提供了强大的JavaScript API可以帮助开发人员很好的实现该功能,下面的事例主要讲述了如何把Y轴数据格式化为欧元以及美元两种货币,并使用两条Y轴直观地显示出来,具体可以参考下面的详细代码:
<html>
<head>
<script src="http://cdn.
AnyChart.com/js/7.10.1/
AnyChart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.
AnyChart.com/css/latest/
AnyChart-ui.min.css" />
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
chart.title("Axes Labels Enable/Disable Sample");
chart.area([
["January" , 10000],
["February" , 12000],
["March" , 10000],
["April" , 11000],
["May" , 19000]
]);
var yScale = chart.yScale();
yScale.minimum(8000);
yScale.maximum(20000);
var ticks = chart.yScale().ticks();
ticks.interval(2000);
// set function to format y axis labels
var yLabels = chart.yAxis(0).labels();
yLabels.textFormatter(dollarFormatter);
// set y axis title
var yTitle = chart.yAxis(0).title();
yTitle.text("Revenue in US Dollars");
// adjust additional axis
var yAxis1 = chart.yAxis(1);
yAxis1.orientation("right");
yAxis1.title("Revenue in Euros");
// formats labels of additional axis
var yLabels1 = chart.yAxis(1).labels();
yLabels1.textFormatter(function(){
var value = this.value;
// scale of USD
value = value*0.7094716;
// num decimal
value = value.toFixed(2);
// thousand separator
var num = value.split(".");
var main = "";
for (var i=1;(i*3)<num[0].length;i++)
main = "'"+num[0].substr(num[0].length-(i*3), 3) + main;
var tail = num[0].substr(0, num[0].length-(main.length-main.length/4));
num[0]=tail+main;
// decimal Separator
value = num.join(".");
return "€ " + value;
});
var xAxis = chart.xAxis();
xAxis.title("Month");
function dollarFormatter() {
return "$" + (this.value/1000) + " 000 USD";
}
chart.container("container");
chart.draw();
});
</script>
</body>
</html>