amcharts 折线图

var chart;
var datetime = Ext.Date.format(Ext.getCmp('starttimeid').getValue(), 'Y年m月d日 H点m分');  // 开始时间   因为有条件查询
var datetime1 = Ext.Date.format(Ext.getCmp('endtimeid').getValue(), 'Y年m月d日 H点m分');结束时间
var gridas = Ext.getCmp('hispointone');  //获取选中的 复选框
var rowsas = gridas.getSelectionModel().getSelection();
var pointidss = rowsa[0].data.id;    //获取选中的复选框的 id  
Ext.Ajax.request({
    url: 'point/curveData.shtml',
    params: {
        id: pointidss,  //将值传送的后台
        starttime: datetime,
        endtime: datetime1
    },
    sync: true,

    success: function (response) {

            var chartData1 = Ext.decode(response.responseText);  //获取查询回来的数据
        var hisdata1 = [];
            if (chartData1 !== null && chartData1.length > 0) {
                for (var aa = 0; aa < chartData1.length; aa++) {
                    hisdata1.push({


                        datatime1: new Date(chartData1[aa].datatime1), //返回的时间
                        dvalue: chartData1[aa].dvalue, //数据
                    })
                }
            }
            chart1 = new AmCharts.AmSerialChart();
            chart1.pathToImages = "resources/images/image/";
            chart1.dataProvider = hisdata1;  //循环获取的数据 数据
            chart1.color = "#00BB00";
            chart1.plotAreaBorderColor = "#00BB00";
            chart1.categoryField = "datatime1";  //  x轴需要的 时间
            var categoryAxis1 = chart1.categoryAxis;
            categoryAxis1.gridAlpha = 0.15;
            categoryAxis1.axisColor = "#0000C6";
            categoryAxis1.gridColor = "#0000C6";
            categoryAxis1.parseDates = true;
            categoryAxis1.minPeriod = "ss";
            categoryAxis1.boldPeriodBeginning = true;
            categoryAxis1.dateFormats = [{ //展示的 时间区间
                period: 'fff',
                format: 'JJ:NN:SS'
            }, {
                period: 'ss',
                format: 'JJ:NN:SS'
            }, {
                period: 'mm',
                format: 'JJ:NN'
            }, {
                period: 'hh',
                format: 'JJ:NN'
            }, {
                period: 'DD',
                format: 'DD'
            }, {
                period: 'WW',
                format: 'DD'
            }, {
                period: 'MM',
                format: 'MMM'
            }, {
                period: 'YYYY',
                format: 'YYYY'
            }];
            var valueAxis1 = new AmCharts.ValueAxis();//样式
            valueAxis1.axisColor = "#0000C6";
            valueAxis1.gridColor = "#0000C6";
            valueAxis1.precision = 1;
            valueAxis1.autoGridCount = false;
            chart1.addValueAxis(valueAxis1);
            var chartCursor1 = new AmCharts.ChartCursor();
            chartCursor1.categoryBalloonDateFormat = "MM-DD JJ:NN:SS";  //鼠标放到折线图  时间展示格式
            chartCursor1.valueLineEnabled = true;
            chartCursor1.valueLineBalloonEnabled = true;
            chartCursor1.pan = false;
            chartCursor1.zoomable = true;
            chart1.addChartCursor(chartCursor1);
            var graphh1 = new AmCharts.AmGraph();
            graphh1.title = "历史值";
            graphh1.valueField = "dvalue";
            graphh1.balloonText = "<b><span style='font-size:14px;'>历史值:[[dvalue]]</span></b>";  //获取的数据
            graphh1.lineColor = "#33CC00";
            chart1.addGraph(graphh1);


            var legend1 = new AmCharts.AmLegend();
            legend1.valueAlign = "left";
            legend1.useMarkerColorForLabels = true;
            legend1.useMarkerColorForValues = true;
            legend1.useGraphSettings = true;
            chart1.addLegend(legend1);
            chart1.write("avchischartdiv");   定义div  获取divid 生成折线图


        },
        failure: function () {
            Ext.Msg.alert('曲线', '获取历史数据异常');
        }
});



效果如下 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用AmCharts构建地图需要遵循以下步骤: 1. 引入AmCharts的库文件。可以从AmCharts官网下载或者使用CDN链接引入。 2. 创建一个div容器来承载地图。 3. 创建一个地图对象,并设置地图的属性,例如地图类型、背景色、缩放等级等。 4. 加载地图数据。可以使用AmCharts提供的地图数据或者自己的地图数据。 5. 创建图层和图像对象,将地图数据显示在地图上。可以使用AmCharts提供的图层和图像对象,也可以自定义图层和图像对象。 6. 设置图层和图像对象的属性,例如颜色、边框、标签等。 7. 绑定事件处理程序,例如鼠标单击、鼠标移动等。 8. 将地图对象添加到div容器中显示。 下面是一个简单的例子: ```javascript // 引入AmCharts库文件 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/maps.js"></script> <script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script> // 创建一个div容器 <div id="chartdiv" style="width: 100%; height: 500px;"></div> // 创建地图对象 var chart = am4core.create("chartdiv", am4maps.MapChart); // 设置地图属性 chart.projection = new am4maps.projections.Miller(); chart.background.fill = am4core.color("#F5F5F5"); chart.zoomLevel = 2; // 加载地图数据 chart.geodata = am4geodata_worldLow; // 创建图层和图像对象 var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries()); var polygonTemplate = polygonSeries.mapPolygons.template; // 设置图层和图像对象属性 polygonTemplate.fill = am4core.color("#74B266"); polygonTemplate.stroke = am4core.color("#FFFFFF"); polygonTemplate.strokeWidth = 1; // 绑定事件处理程序 polygonTemplate.events.on("hit", function(ev) { console.log("Clicked on ", ev.target.dataItem.dataContext.name); }); // 将地图对象添加到div容器中显示 chart.homeZoomLevel = 2; chart.homeGeoPoint = { longitude: 0, latitude: 0 }; chart.seriesContainer.draggable = false; chart.seriesContainer.resizable = false; ``` 这个例子创建了一个包含世界地图的AmCharts地图,并且设置了地图的属性、图层和图像对象的属性,并且绑定了一个单击事件处理程序。你可以根据自己的需要调整这个例子。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值