1

我必须绘制来自 ajax 请求的时间和价值图，我需要知道如何将数据显示到 highcharts，请找到以下代码：

获取数据的 JSP：

<%@ page import = "com.qdx.eqc.vo.*, com.qdx.eqc.proxy.EQCProxyClient, java.util.*" %>
<%

    System.out.println("Inside landingAjax.jsp");
    String productionID = request.getParameter("productionID");
    System.out.println("productionID = "+productionID);
    String instrumentID = request.getParameter("instrumentID");
    System.out.println("instrumentID = "+instrumentID);
    String testId = request.getParameter("testId");
    System.out.println("testId = "+testId);
    String instrType = request.getParameter("instrType");
    System.out.println("instrType = "+instrType);
    String testInstrTypeId = request.getParameter("testInstrTypeId");
    System.out.println("testInstrTypeId = "+testInstrTypeId);
    String departmentId = request.getParameter("departmentId");
    System.out.println("departmentId = "+departmentId);

    EQCProxyClient client = new EQCProxyClient();
    ResponseVO responseVO = null;

    //Graph data for patinetbias START
    responseVO = client.getPatientBiasData(productionID,instrumentID,testId,instrType,testInstrTypeId,"7.0",departmentId);
    ArrayList xAxis = new ArrayList();
    ArrayList lines = new ArrayList();
    ArrayList dateTime = new ArrayList();
    ArrayList doubleValue = new ArrayList();
    Date duration = new Date();
    Iterator itt=responseVO.getResponse().iterator();
    while(itt.hasNext()){
        PatientBiasDataVO po = (PatientBiasDataVO)itt.next();
        xAxis = po.getPatientBiasData();
        Iterator biasItr = xAxis.iterator();                                                    
                while(biasItr.hasNext())
                {
                    BiasDataVO biasData = (BiasDataVO)biasItr.next();
                    if(biasData.getStrDateTime()!=null)
                    {
                    dateTime.add(biasData.getStrDateTime());

                    }
                    doubleValue.add(biasData.getValue());

                }
        lines = po.getVerticalLines();
        duration = po.getDateTime();
        System.out.println(" xAxis "+ xAxis + " lines " + lines + "duration" + duration );
    }
    out.print(doubleValue.toString()+','+dateTime.toString()); /// THESE IS THE GRAPH DATA as VALUE AND TIME

%>

用于 AJAX 和 HIGHCHARTS 的 JAVASCRIPT：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){alert('came in');
           var options = {
                    chart: {
                        renderTo: 'right1',
                        type: 'spline',
                        marginRight: 10,
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: 'Patient Bias Display'

                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'Bias'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                                Highcharts.numberFormat(this.y, 2);
                        }

                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    plotOptions: {
                        color: '#F3F70E'
                    },
                    series: []

            };

           var productionID = document.getElementById('productionID').value;
           var instrumentID = document.getElementById('instrumentID').value;
           var testId = document.getElementById('testId').value
           var instrType = document.getElementById('instrType').value;
           var testInstrTypeId = document.getElementById('testInstrTypeId').value;
           var departmentId = document.getElementById('departmentId').value;

            var url = "landingAjax.jsp";
            url = url+"?productionID="+productionID+"&instrumentID="+instrumentID+"&testId="+testId+"&instrType="+instrType+"&testInstrTypeId="+testInstrTypeId+"&departmentId="+departmentId;
            alert(url);
            $('#highCharts').click(function() {alert('clicked'); // CLICKED is alerted
                $.getJSON(url, function(data) {alert(url);    //THis alert doesnt work

如何在 X 轴和 Y 轴中填充数据？
变种系列= {数据：[]}；

                        options.series.push(series);

                    var chart = new Highcharts.Chart(options);
                });
            });
    });
    </script>

我需要知道如何在 x 和 y 轴上累积数据来绘制图表，请参阅我上面的评论。

帮帮我，伙计们..如果有什么不明白的；请在评论中......谢谢！

4

1 回答 1

0

这是我的做法……你可能会找到更好的方法

  • 我对服务器进行 javascript ajax 调用
  • 将您的图表放在一个函数中，将其称为任何 thisngdrawchart()
  • 将您的回调传递给该函数

注意

要填充 x 轴，您最终需要得到一个数组，如下所示

     xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

对于这个数组中的每个元素，您需要将一个值传递给您的series data[1,2,3,....]

例子

    $.ajax({
            type: "POST",
            url: "YOUR WEB SERVICE ",
            data: "",
            dataType: "json",
            contentType: "application/json; charset=utf-8",

            success: function (myvalue) { 
               drawchart(myvalue) ; 

              }});

你还需要阅读这个

于 2012-07-20T12:43:23.650 回答