python画柱型图显示数值_amCharts绘制柱形图默认显示数值

使用amCharts.js绘制柱形图(column chart)时，有时需要默认显示每一个柱子的数值。

通过在AmCharts.AmGraph中设置labelText属性为[[value]]，即可实现上述需求。

效果如下所示：

上例的代码如下所示：

amCharts examples

var chart;

var chartData = [

{

"country": "China",

"visits": 2325

},

{

"country": "USA",

"visits": 1822

},

{

"country": "Japan",

"visits": 1809

},

{

"country": "Germany",

"visits": 1322

},

{

"country": "UK",

"visits": 1122

},

{

"country": "France",

"visits": 1114

}

];

AmCharts.ready(function () {

// SERIAL CHART

chart = new AmCharts.AmSerialChart(AmCharts.themes.light);

chart.dataProvider = chartData;

chart.categoryField = "country";

chart.startDuration = 1;

// AXES

// category

var categoryAxis = chart.categoryAxis;

categoryAxis.labelRotation = 90;

categoryAxis.gridPosition = "start";

// value

// in case you don't want to change default settings of value axis,

// you don't need to create it, as one value axis is created automatically.

// GRAPH

var graph = new AmCharts.AmGraph();

graph.valueField = "visits";

graph.balloonText = "[[category]]: [[value]]";

graph.type = "column";

graph.lineAlpha = 0;

graph.fillAlphas = 0.8;

// display label text on each column

graph.labelText = "[[value]]";

chart.addGraph(graph);

// CURSOR

var chartCursor = new AmCharts.ChartCursor();

chartCursor.cursorAlpha = 0;

chartCursor.zoomable = false;

chartCursor.categoryBalloonEnabled = false;

chart.addChartCursor(chartCursor);

chart.creditsPosition = "top-right";

chart.write("chartdiv");

});

如果您喜欢这篇博文，欢迎您捐赠书影博客：

，查看支付宝二维码

×

捐赠书影博客

Close