如何给js版本的amchart折线图绑定值

wangnaian 发布于 2012/09/18 16:13
阅读 1K+
收藏 0

通过页面查询到先关信息,在后台查到了,如何将后台数据绑定到折线图上。求高手指教!

页面代码如下:

<div class="middlebody">

    <p class="p1"><span class="span1">${object.codeName} > 当日趋势图</span></p>

    <div class="nr">

    <a name="anchor" id="anchor" ></a>

    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle">

    <tr>

   <td width="10%"><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "1" <c:if test="${jsyl eq '1'}">checked='checked'</c:if>/>进水压力</td>

   <td rowspan="14">

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

   </td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "2" <c:if test="${dqyl eq '2'}">checked='checked'</c:if>>低区出水压力</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "3" <c:if test="${zqyl eq '3'}">checked='checked'</c:if>>中区出水压力</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "4" <c:if test="${gqyl eq '4'}">checked='checked'</c:if>>高区出水压力</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "5" <c:if test="${dqdy eq '5'}">checked='checked'</c:if>>低区进线电压</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "6" <c:if test="${zqdy eq '6'}">checked='checked'</c:if>>中区进线电压</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "7" <c:if test="${gqdy eq '7'}">checked='checked'</c:if>>高区进线电压</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "8" <c:if test="${sxyw eq '8'}">checked='checked'</c:if>>水箱液位</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "9" <c:if test="${dqpl eq '9'}">checked='checked'</c:if>>低区频率</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "10" <c:if test="${zqpl eq '10'}">checked='checked'</c:if>>中区频率</td>

</tr>

<tr>

   <td><input type="checkbox" name='hot' onclick="chooseOne(this, '<%=dz %>')" value = "11" <c:if test="${gqpl eq '11'}">checked='checked'</c:if>>高区频率</td>

</tr>

<tr>

   <td><input type="button" name="重置" value="重置" onclick="reset()">&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="查询" value="查询" onclick="query()"></td>

</tr>

</table>

</div>

<p class="p2"><span  class="span2"></span></p>

</body>

<script type="text/javascript">

function chooseOne(cb, dz){

var varName = cb.value;

var obj = document.getElementsByName("hot");

if (varName == 1 || varName == 2 || varName == 3 || varName == 4) {

if (cb.checked) {

for (i=0; i<obj.length; i++) {

if (obj[i].value == 5 || obj[i].value == 6|| obj[i].value == 7|| obj[i].value == 8|| obj[i].value == 9|| obj[i].value == 10|| obj[i].value == 11) {

obj[i].disabled = "disabled";

}

}

} else if (varName == 5 || varName == 6 || varName == 7) {

for (i=0; i<obj.length; i++) {

if (obj[i].value == 1 || obj[i].value == 2|| obj[i].value == 3|| obj[i].value == 4|| obj[i].value == 8|| obj[i].value == 9|| obj[i].value == 10 || obj[i].value == 11) {

obj[i].disabled = "disabled";

}

}

} else if (varName == 8) {

for (i=0; i<obj.length; i++) {

if (obj[i].value == 1 || obj[i].value == 2|| obj[i].value == 3|| obj[i].value == 4|| obj[i].value == 5|| obj[i].value == 6|| obj[i].value == 7 || obj[i].value == 9|| obj[i].value == 10|| obj[i].value == 11|| obj[i].value == 12) {

obj[i].disabled = "disabled";

}

}

} else if (varName == 9 || varName == 10 || varName == 11) {

for (i=0; i<obj.length; i++) {

if (obj[i].value == 1 || obj[i].value == 2|| obj[i].value == 3|| obj[i].value == 4|| obj[i].value == 5|| obj[i].value == 6|| obj[i].value == 7 || obj[i].value == 8) {

obj[i].disabled = "disabled";

}

}

}

}

function reset() {

var obj = document.getElementsByName("hot");

for (i=0; i<obj.length; i++) {

obj[i].disabled = false;

obj[i].checked = false; 

}

}

function query() {

var queryType = "";

var obj = document.getElementsByName("hot");

for (i=0; i<obj.length; i++) {

if (obj[i].checked){

if (queryType == "") {

queryType = queryType  + obj[i].value;

} else {

queryType = queryType  + "-" + obj[i].value;

}

}

}

window.location.href = "${ctx}/xj/StateDetailInfo.do?method=chart&codeId=${object.codeId}&varName="+queryType+"&dz=${dz}#anchor" ; 

}

</script>

<script type="text/javascript">

            var chart;

            var chartData = [];

 

            AmCharts.ready(function () {

                // generate some random data first

                generateChartData();

 

                // SERIAL CHART    

                chart = new AmCharts.AmSerialChart();

                chart.pathToImages = "../amcharts/images/";

                chart.zoomOutButton = {

                    backgroundColor: '#000000',

                    backgroundAlpha: 0.15

                };

                chart.dataProvider = chartData;

                chart.categoryField = "date";

 

                // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens

                chart.addListener("dataUpdated", zoomChart);

 

                // AXES

                // category                

                var categoryAxis = chart.categoryAxis;

                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true

                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD

                categoryAxis.dashLength = 2;

                categoryAxis.gridAlpha = 0.15;

                categoryAxis.axisColor = "#DADADA";

 

                // first value axis (on the left)

                var valueAxis1 = new AmCharts.ValueAxis();

                valueAxis1.axisColor = "#FF6600";

                valueAxis1.axisThickness = 2;

                valueAxis1.gridAlpha = 1;

                chart.addValueAxis(valueAxis1);

 

                // second value axis (on the right) 

                var valueAxis2 = new AmCharts.ValueAxis();

                valueAxis2.position = "right"; // this line makes the axis to appear on the right

                valueAxis2.axisColor = "#FCD202";

                valueAxis2.gridAlpha = 0;

                valueAxis2.axisThickness = 2;

                chart.addValueAxis(valueAxis2);

 

                // third value axis (on the left, detached)

                valueAxis3 = new AmCharts.ValueAxis();

                valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area

                valueAxis3.gridAlpha = 0;

                valueAxis3.axisColor = "#B0DE09";

                valueAxis3.axisThickness = 2;

                chart.addValueAxis(valueAxis3);

 

                // GRAPHS

                // first graph

                var graph1 = new AmCharts.AmGraph();

                graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used

                graph1.title = "red line";

                graph1.valueField = "visits";

                graph1.bullet = "round";

                graph1.hideBulletsCount = 30;

                chart.addGraph(graph1);

 

                // second graph                

                var graph2 = new AmCharts.AmGraph();

                graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used

                graph2.title = "yellow line";

                graph2.valueField = "hits";

                graph2.bullet = "square";

                graph2.hideBulletsCount = 30;

                chart.addGraph(graph2);

 

                // third graph

                var graph3 = new AmCharts.AmGraph();

                graph3.valueAxis = valueAxis3; // we have to indicate which value axis should be used

                graph3.valueField = "views";

                graph3.title = "green line";

                graph3.bullet = "triangleUp";

                graph3.hideBulletsCount = 30;

                chart.addGraph(graph3);

                

 

                // CURSOR

                var chartCursor = new AmCharts.ChartCursor();

                chartCursor.cursorPosition = "mouse";

                chart.addChartCursor(chartCursor);

 

                // SCROLLBAR

                var chartScrollbar = new AmCharts.ChartScrollbar();

                chart.addChartScrollbar(chartScrollbar);

 

                // LEGEND

                var legend = new AmCharts.AmLegend();

                legend.marginLeft = 110;

                chart.addLegend(legend);

 

                // WRITE

                chart.write("chartdiv");

            });

 

            // generate some random data, quite different range

            function generateChartData(object) {

            alert(object);

                var firstDate = new Date();

                firstDate.setDate(firstDate.getDate() - 50);

 

                for (var i = 0; i < 50; i++) {

                    var newDate = new Date(firstDate);

                    newDate.setDate(newDate.getDate() + i);

 

                    var visits = Math.round(Math.random() * 40) + 100;

                    var hits = Math.round(Math.random() * 80) + 500;

                    var views = Math.round(Math.random() * 6000);

                    var view = Math.round(Math.random() * 60);

 

                    chartData.push({

                        date: newDate,

                        visits: visits,

                        hits: hits,

                        views: views,

                        view:view

                    });

                }

            }

 

            // this method is called when chart is first inited as we listen for "dataUpdated" event

            function zoomChart() {

                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues

                chart.zoomToIndexes(10, 20);

            }

        </script>

后台代码:

public class StateDetailInfoDao extends BaseDao<StateDetailInfo> {

public String sqlSelectDz;

 

public StateDetailInfoDao() {

sqlSelect = "select a.codeid,a.codename,a.varid,a.varname,a.varalias,a.numdigits,a.displayorder,b.vartime,b.varvalue "

+ "from vVarInfo a left join vRealData b on b.varid=a.varid and b.vartime=(select max(vartime) from vRealData) ";

sqlSelectDz = "select a.codeid,a.codename,a.varid,a.varname,a.varalias,a.numdigits,a.displayorder,b.vartime,b.varvalue "

+ "from vAreaVarInfo a left join vAreaRealData b on b.varid=a.varid and b.vartime=(select max(vartime) from vAreaRealData) ";

}

 

@Override

public String buildSqlQueryCondition(String sql, Map paramsMap) {

StringBuilder sb = new StringBuilder(sql);

sb.append("where 1=1 ");

 

String codeId = (String) paramsMap.get("codeId");

if (StringUtils.isNotBlank(codeId)) {

if (codeId.length() > 4) {

sb.append("and a.codeid ='" + codeId.substring(0, 4) + "' ");

} else {

sb.append("and a.codeid ='" + codeId + "' ");

}

}

 

sb.append("and a.codeid is not null ");

sb.append("order by a.codeid,a.displayorder ");

return sb.toString();

}

 

@Override

public Map getParamsMap(StateDetailInfo object) {

// TODO Auto-generated method stub

return null;

}

 

@Override

public RowMapper getRowMapper() {

return new RowMapper<StateDetailInfo>() {

@Override

public StateDetailInfo mapRow(ResultSet rs, int rowNum) throws SQLException {

StateDetailInfo object = new StateDetailInfo();

object.setCodeId(rs.getString("codeID"));

object.setCodeName(rs.getString("codeName"));

object.setVarName(rs.getString("varName"));

double varValue = rs.getDouble("varValue");

BigDecimal b = new BigDecimal(varValue);

varValue = b.setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();

object.setVarValue(varValue);

return object;

}

};

}

 

}


加载中
返回顶部
顶部