2014-11-03 2 views
1
<script type="text/javascript"> 
$(document).ready(function(){ 
myFunc(); 

    }); 

    function myFunc(){ 

if (document.getElementById('graph').value=10){ 

var chartData = [{"category":"Payment Details", "value1":10, "value2":90}]; 


var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "depth3D":100, 
    "angle":30, 
    "autoMargins":false, 
    "marginBottom":100, 
    "marginLeft":350, 
    "marginRight":300, 
    "pathToImages": "images/", 
    "dataProvider": chartData, 
    "valueAxes": [{ 
     "stackType": "100%", 
     "gridAlpha": 0 
    }], 
    "graphs": [{ 
     "type":"column", 
     "topRadius":1, 
     "columnWidth":1, 
     "showOnAxis":true, 
     "lineThickness": 2, 
     "lineAlpha": 0.5, 
     "lineColor": "#FFFFFF", 
     "fillColors": "#8d003b", 
     "fillAlphas": 0.8, 
     "valueField": "value1" 
    },{ 
     "type":"column", 
     "topRadius":1, 
     "columnWidth":1, 
     "showOnAxis":true, 
     "lineThickness": 2, 
     "lineAlpha": 0.5, 
     "lineColor": "#cdcdcd", 
     "fillColors": "#cdcdcd", 
     "fillAlphas": 0.5, 
     "valueField": "value2" 
    }], 

    "categoryField": "category", 
    "categoryAxis": { 
     "axisAlpha": 0, 
     "labelOffset":40, 
     "gridAlpha":0 
    } 
    });} 

    else if (document.getElementById('graph').value=20){ 

    var chartData = [{"category":"Payment Details", "value1":20, "value2":80}]; 


var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "depth3D":100, 
    "angle":30, 
    "autoMargins":false, 
    "marginBottom":100, 
    "marginLeft":350, 
    "marginRight":300, 
    "pathToImages": "images/", 
    "dataProvider": chartData, 
    "valueAxes": [{ 
     "stackType": "100%", 
     "gridAlpha": 0 
    }], 
    "graphs": [{ 
     "type":"column", 
     "topRadius":1, 
     "columnWidth":1, 
     "showOnAxis":true, 
     "lineThickness": 2, 
     "lineAlpha": 0.5, 
     "lineColor": "#FFFFFF", 
     "fillColors": "#8d003b", 
     "fillAlphas": 0.8, 
     "valueField": "value1" 
    },{ 
     "type":"column", 
     "topRadius":1, 
     "columnWidth":1, 
     "showOnAxis":true, 
     "lineThickness": 2, 
     "lineAlpha": 0.5, 
     "lineColor": "#cdcdcd", 
     "fillColors": "#cdcdcd", 
     "fillAlphas": 0.5, 
     "valueField": "value2" 
    }], 

    "categoryField": "category", 
    "categoryAxis": { 
     "axisAlpha": 0, 
     "labelOffset":40, 
     "gridAlpha":0 
    } 
    }); 
} 
    </script> 
<form:form method="GET" modelAttribute="xyz" action="xyz.htm" > 
    <c:forEach items="${payouts}" var="payout" > 
         <tr> 
    <input type="hidden" name="graph" id = "graph" value 
    ="${payout.graph}"/>  
</tr>   

그래프 값을 사용하여 원통형 차트를 jsp로 가져 오려고합니다. 차트에 값 = 20이 표시되지 않습니다. 경우에만 심지어 그래프 값을 실행하면 20 개의그래프 값에 따라 차트 웹 페이지를 가져 오려고합니다. 하지만

그래프 값 I가 아래 문을 사용했다

+0

당신은 오타'document.getElementById ('그래프')가 있습니다. 값 = 10'은 대입 연산자'='를 사용합니다. 당신이 원하는 것은'document.getElementById ('graph')를 만드는 비교 연산자'=='입니다. value == 10' – scrappedcola

+0

감사합니다. 나는 그 결과를 보았습니다 ... 이전과 동일했습니다 ... –

+0

'else if' 문도 마찬가지입니까? 어느 쪽도 올바른 연산자를 사용하고 있지 않습니다. 정확히 무엇을하고 있지 않습니까? 일부 디버그 문을 던져'document.getElementById ('graph'). value' 값이 무엇인지 확인하십시오. – scrappedcola

답변

1

의 일에 기초 JSP에서 차트를 얻는 방법을 제안 해주십시오이다. 그리고 그것은 나를 위해 잘 작동했습니다.

if (document.getElementById('graph').value==10){....} 
관련 문제