amcharts 折线图

来源:互联网 发布:matlab编程第二版购买 编辑:程序博客网 时间:2024/05/21 22:28
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('曲线', '获取历史数据异常');
        }
});



效果如下 

原创粉丝点击