Amcharts 柱状图和线形图
生活随笔
收集整理的這篇文章主要介紹了
Amcharts 柱状图和线形图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近需要學習 Amcharts ，他的圖表功能確實很強大。但是網上搜索到的教程很少，開始學起的確有點不方便。于是我決定把我學習的覺得好的途徑，放到博客上。
下面的代碼可以直接復制，但是文件要從官網上下載下來。官網地址：www.amcharts.com
<html> <head> <title>My JSP 'index.jsp' starting page</title> <!-- 導入Amcharts js 庫 --> <script src="amcharts/amcharts.js" type="text/javascript"></script> <script type="text/javascript"> var fun1 = function(){ var chartData = [{ country: "USA", visits: 4252 }, { country: "China", visits: 1882 }, { country: "Japan", visits: 1809 }, { country: "Germany", visits: 1322 }, { country: "UK", visits: 1122 }, { country: "France", visits: 1114 }, { country: "India", visits: 984 }, { country: "Spain", visits: 711 }, { country: "Netherlands", visits: 665 }, { country: "Russia", visits: 580 }, { country: "South Korea", visits: 443 }, { country: "Canada", visits: 441 }, { country: "Brazil", visits: 395 }, { country: "Italy", visits: 386 }, { country: "Australia", visits: 384 }, { country: "Taiwan", visits: 338 }, { country: "Poland", visits: 328}]; //AmSerialChart 類 var chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; //指定數據源 chart.categoryField = "country"; //數據的分類 //創建 var graph = new AmCharts.AmGraph(); graph.valueField = "visits"; //數值字段名稱 graph.type = "column"; //列名稱 chart.addGraph(graph); chart.write(document.getElementById("chartContainer")); //write 到 div 中 } </script> </head> <body onload="fun1()"> <div id="chartContainer" style="width: 640px; height: 400px;"></div> </body> </html?
上面代碼執行后的效果圖如下：
?
下面繼續添加代碼優化顯示效果，注意下面的代碼要放到
chart.write(document.getElementById("chartContainer")); 上面執行。 var categoryAxis = chart.categoryAxis; categoryAxis.autoGridCount = false;//設置為false，否則gridount屬性會被忽略。 categoryAxis.gridCount = chartData.length; categoryAxis.gridPosition = "start"; categoryAxis.labelRotation = 90;//圖形下面的文字旋轉90度。效果圖：
下面填充3D：
graph.fillAlphas = 0.8;//填充柱形圖的顏色 chart.angle = 30; chart.depth3D = 15;//控制列的深度和角度 graph.balloonText = "[[category]]: <b>[[value]]</b>";//在數值前面加上國家名效果圖：
?
制作面積圖
graph.type = "line"; graph.fillAlphas = 0.5;效果圖：
?
帶有項目符號的折線圖
graph.fillAlphas = 0; // 或者刪除這一行, 因為0是默認值 graph.bullet = "round"; graph.lineColor = "#8d1cc6";效果圖
轉載于:https://www.cnblogs.com/Strive-count/p/6526766.html
總結
以上是生活随笔為你收集整理的Amcharts 柱状图和线形图的全部內容，希望文章能夠幫你解決所遇到的問題。
