amchart折线图示例

最新推荐文章于 2018-12-14 10:24:18 发布

weixin_34319817

最新推荐文章于 2018-12-14 10:24:18 发布

阅读量341

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3544533/blog/1608629

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用amchart折现图准备工作2步：

1.需要引用封装好的amcharts.js文件和css样式表；

2.在页面上创建一个div容器存放折线图；

注意：

在页面的head部分我们需要添加amCharts JavaScript库文件的引用。由于V3 amCharts库被拆分成了几个文件，为了节省几个kb空间—你需要添加amchart.js主文件，并根据你的需求来决定添加一个或者多个图表文件。柱形图属于序列图的一种，因此我们包含这两个js文件：

<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>

添加顺序很重要，amcharts.js应该放在最前面。

amchart折线图代码如下：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../amcharts/serial.js" type="text/javascript"></script>    
        <script type="text/javascript">
            var chartData = [];            //定义一个数组存储折线图上的点数据
            generateChartData();      //调用自定义方法获取要显示在统计图中的初始数据

          //创建图表

            var chart = AmCharts.makeChart("chartdiv", { //“chartdiv”页面中放置折线图的div容器
                type: "serial",                              //折线图属于柱状图的一种，所以使用serial
                pathToImages: "../amcharts/images/",  //指定chart图片的引用地址
                dataProvider: chartData,          //指定数据来源，一般是一个数据对象
                categoryField: "date",             //指定X轴由哪个字段决定

                //图表线（相当于X轴）
                categoryAxis: {
                    parseDates: true,                  //是否以日期为x轴的值,true代表是
                    gridAlpha: 0.15,       //网格的透明度，介于0-1之间，0全透明，垂直于X轴的刻度线形成网格
                    minorGridEnabled: true,    
                    axisColor: "#DADADA"       //轴的颜色
                },
                valueAxes: [{
                    axisAlpha: 0.2,
                    id: "v1"
                }],

              //折线图
                graphs: [{
                    title: "red line",     //轴的名称
                    id: "g1",
                    valueAxis: "v1",  
                    valueField: "visits", //valueField纵轴
                    bullet: "round",    //节点类型
                    bulletBorderColor: "#FFFFFF",  //节点的边框颜色
                    bulletBorderAlpha: 1,  //节点边框透明度
                    lineThickness: 2,        //折线厚度
                    lineColor: "#b5030d", //折线颜色
                    negativeLineColor: "#0352b5",
              balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"
           }],

              //光标
                chartCursor: {
                    cursorPosition: "mouse"   //光标的位置
                },

              //滚动条
                chartScrollbar: {
                    scrollbarHeight: 40, //滚动条高度
                    color: "#FFFFFF",
                   autoGridCount: true,   //自动调整坐标格子数，false值时展示的值不能自己调整可能会出现序列化后的数据展示界面拥挤
                    graph: "g1"
                }
            });

            chart.addListener("dataUpdated", zoomChart);

     //生成随机日期数据和随机的范围（如果是后台传过来实际数据则直接处理数据不用模拟这些数据）
            function generateChartData() {
                var firstDate = new Date();
                firstDate.setDate(firstDate.getDate() - 500);

                for (var i = 0; i < 500; i++) {                 
                    var newDate = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);

                    var visits = Math.round(Math.random() * 40) - 20;

                    chartData.push({
                        date: newDate,
                        visits: visits
                    });
                }
            }

        //当折线图初始化时触发zoomChart()方法
            function zoomChart() {

       //多种zoom方法可以使用， zoomToIndexes, zoomToDates, zoomToCategoryValues，这里使用zoomToIndexes
                chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
                  }

         //修改条件pan模式和select模式
            function setPanSelect() {
                var chartCursor = chart.chartCursor;

                if (document.getElementById("rb1").checked) {
                    chartCursor.pan = false;
                    chartCursor.zoomable = true;

                } else {
                    chartCursor.pan = true;
                }
                chart.validateNow();
            }           
        </script>
    </head>
    
    <body>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
        <div style="margin-left:35px;">
        <input type="radio" checked="true" name="group" id="rb1" onclick="setPanSelect()">Select
        <input type="radio" name="group" id="rb2" onclick="setPanSelect()">Pan
        </div>        
    </body>

</html>

转载于:https://my.oschina.net/u/3544533/blog/1608629