• 下載amCharts JavaScript Charts

盡管你可以像格式化時長一樣格式化值軸標簽，在值的左右添加單元。不過，你可能需要更多的功能，比如，用字符串代替值的數值軸，或者為分類軸標簽添加文本。

amcharts的ValueAxis中有一個屬性叫labelFunction。在展現標簽之前如果為該屬性設置一些功能，將會呼出該功能、傳遞值、格式化值以及數值軸參考作為參數，該功能將會返回代替原來默認值的字符串。

<img class="img-thumbnail alt=" amcharts="" 用任意文本替代標簽"="" data-cke-saved-src="//image.ke049m.cn/images/article/2014/amcharts_Replacing_axis_labels_with_arbitrary_text_.jpg" src="//image.ke049m.cn/images/article/2014/amcharts_Replacing_axis_labels_with_arbitrary_text_.jpg">

var chart;

var chartData = [
    {
        "category": "Evaluation",
        "excelent": 20,
        "good": 20,
        "average": 20,
        "poor": 20,
        "bad": 20,
        "limit": 78,
        "full": 100,
        "bullet": 65
    }
];


AmCharts.ready(function () {
    
    // FIRST BULLET CHART
    // bullet chart is a simple serial chart
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "category";
    chart.rotate = true; // if you want vertical bullet chart, set rotate to false
    chart.columnWidth = 1;
    chart.startDuration = 1;
    
    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridAlpha = 0;
    
    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.labelFunction = formatValue;
    valueAxis.maximum = 100;
    valueAxis.axisAlpha = 1;
    valueAxis.gridAlpha = 0;
    valueAxis.stackType = "regular"; // we use stacked graphs to make color fills
    chart.addValueAxis(valueAxis);
    
    // this graph displays the short dash, which usually indicates maximum value reached.
    var graph = new AmCharts.AmGraph();
    graph.valueField = "limit";
    graph.lineColor = "#000000";
    // it's a step line with no risers
    graph.type = "step";
    graph.noStepRisers = true;
    graph.lineAlpha = 1;
    graph.lineThickness = 3;
    graph.columnWidth = 0.5; // change this if you want wider dash
    graph.stackable = false; // this graph shouldn't be stacked
    chart.addGraph(graph);
    
    // The following graphs produce color bands
    graph = new AmCharts.AmGraph();
    graph.valueField = "excelent";
    graph.lineColor = "#19d228";
    graph.showBalloon = false;
    graph.type = "column";
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);
    
    graph = new AmCharts.AmGraph();
    graph.valueField = "good";
    graph.lineColor = "#b4dd1e";
    graph.showBalloon = false;
    graph.type = "column";
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);
    
    graph = new AmCharts.AmGraph();
    graph.valueField = "average";
    graph.lineColor = "#f4fb16";
    graph.showBalloon = false;
    graph.type = "column";
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);
    
    graph = new AmCharts.AmGraph();
    graph.valueField = "poor";
    graph.lineColor = "#f6d32b";
    graph.showBalloon = false;
    graph.type = "column";
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);
    
    graph = new AmCharts.AmGraph();
    graph.valueField = "bad";
    graph.lineColor = "#fb7116";
    graph.showBalloon = false;
    graph.type = "column";
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);
    
    // this is the "bullet" graph - black bar showing current value
    graph = new AmCharts.AmGraph();
    graph.valueField = "bullet";
    graph.lineColor = "#000000";
    graph.type = "column";
    graph.lineAlpha = 1;
    graph.fillAlphas = 1;
    graph.columnWidth = 0.3; // this makes it narrower than color graphs
    graph.stackable = false; // bullet graph should not stack
    graph.clustered = false; // this makes the trick - one column above another
    chart.addGraph(graph);
    
    // WRITE
    chart.write("chartdiv");   
    
});

function formatValue(value, formattedValue, valueAxis){
    if(value === 0){
        return "little";
    }
    else if(value == 50){
        return "so-so";
    }
    else if (value == 100){
        return "a lot!";
    }
    else{
        return "";
    }
}