首页 > 代码库 > Amcharts 柱状图和线形图

Amcharts 柱状图和线形图

2024-09-07 18:50:40   216人阅读

最近需要学习 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";

效果图

技术分享

Amcharts 柱状图和线形图


联系
我们