半岛外围网上直营

• 下载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 "";
    }
}