JS plugin AMCHARTS implementation plot column graph default display numerical function example

The instance of this article describes the JS plug-in AmCharts implementation drawing column graph default display numerical functions. Share to everyone for your reference, as follows:

When using amcharts.js to draw a column chart (Column chart), you sometimes need to display the value of each column by default.

The above requirements can be implemented by setting the LabelText property in AmCharts.amGraph to[[Value]].


The code of the above example is as follows:

         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 changement set 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 ");};          Interested friends can use 
online HTML / CSS / JavaScript code run tool
: http: //tools.jb51.net/code/htmljsrun Tests the code running effect. More about JavaScript Related Contents View this Topic: "JavaScript Operation DOM Skation Summary", "JavaScript Page Element Operation Skills Summary", "JavaScript Event Information and Skills", "JavaScript Find Algorithm Tips Summary
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment