AnyChart如何对图表Y轴数字标签进行格式化

作者:控件中国网   出处:控件中国网   2016-07-26 09:50:18   阅读:31

在图表应用中一般情况下Y轴都是采用数字标签,客户很多时候需要对这些数字进行各种格式化或者是加上各种直观的度量衡,如温度、长度、货币单位等,AnyChart JavaScript提供了强大的JavaScript API可以帮助开发人员很好的实现该功能,下面的事例主要讲述了如何把Y轴数据格式化为欧元以及美元两种货币,并使用两条Y轴直观地显示出来,具体可以参考下面的详细代码:
<a href=http://www.componentcn.com/kaifashang/guojikaifashang/2014-06-11/1.html target=_blank class=infotextkey>AnyChart</a>.png
<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>
AnyChart.onDocumentReady(function() {
  var chart = AnyChart.area();
  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>
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat