div 표시 및 숨기기

Question

안녕하세요, 제출 단추를 클릭하면 그래프가 표시됩니다. div 태그에 표를 배치하려고했는데,이 보이지 않는 항목에 태그를 지정하는 방법을 모르겠습니다. 버튼 그래프의 도움말 m

<form class="form-analyste" name="MyForm" action="{{ path('ConstruireGraph')}}" method="post" id="crs" > 
<input name="send_button" type="submit" value="Valider" class="cssbutton" /> 
</form> 
<div id="chartdiv" style="width: 100%; height: 400px;"> 
</div> 

을 기쁘게 할 수 표시 나 그래프로드하려면이 코드가 : jQuery를 사용

<script type="text/javascript"> 
var chart; 
var chartData = []; 


// generate some random data, quite different range 
function generateChartData() { 
    var firstDate = new Date(); 
    var i = 0; 
    firstDate.setDate(firstDate.getDate() - 50); 

    while (i < 50) { 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + i); 
{% for gra in gra %} 

     var HO_ATT_DL_LEVEL_RATE = {{gra.HO_ATT_DL_LEVEL_RATE}}; 
     var SDCCH_DROP_RATE = {{gra.SDCCH_DROP_RATE}}; 
     var HO_ATT_BETTER_CELL_RATE = {{gra.HO_ATT_BETTER_CELL_RATE}}; 

     chartData.push({ 
      date: newDate, 
      HO_ATT_DL_LEVEL_RATE: HO_ATT_DL_LEVEL_RATE, 
      SDCCH_DROP_RATE: SDCCH_DROP_RATE, 
      HO_ATT_BETTER_CELL_RATE: HO_ATT_BETTER_CELL_RATE, 
      HO_ATT_BETTER_CELL_RATE: HO_ATT_BETTER_CELL_RATE 
     });{% endfor %} 

     i++; 
    } 
} 

// 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); 
} 

// create chart 
AmCharts.ready(function() { 
    // generate some random data first 
    generateChartData(); 

    // SERIAL CHART  
    chart = new AmCharts.AmSerialChart(); 
    chart.marginTop = 0; 
    chart.autoMarginOffset = 5; 
    chart.pathToImages = "http://www.amcharts.com/lib/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 = 0; 
    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); 
    var valueAxis4 = new AmCharts.ValueAxis(); 
    valueAxis4.offset = 100; // this line makes the axis to appear detached from plot area 
    valueAxis4.axisColor = "#1E90FF"; 
    valueAxis4axisThickness = 2; 
    valueAxis4.gridAlpha = 0; 
    chart.addValueAxis(valueAxis4); 
    // GRAPHS 
    // first graph 
    var graph1 = new AmCharts.AmGraph(); 
    graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used 
    graph1.title = "HO_ATT_DL_LEVEL_RATE"; 
    graph1.valueField = "HO_ATT_DL_LEVEL_RATE"; 
    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 = "SDCCH_DROP_RATE"; 
    graph2.valueField = "SDCCH_DROP_RATE"; 
    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 = "HO_ATT_BETTER_CELL_RATE"; 
    graph3.title = "HO_ATT_BETTER_CELL_RATE"; 
    graph3.bullet = "triangleUp"; 
    graph3.hideBulletsCount = 30; 
    chart.addGraph(graph3); 
    var graph4 = new AmCharts.AmGraph(); 
    graph4.valueAxis = valueAxis4; // we have to indicate which value axis should be used 
    graph4.valueField = "HO_ATT_BETTER_CELL_RATE"; 
    graph4.title = "HO_ATT_BETTER_CELL_RATE"; 
    graph4.bullet = "bubble"; 
    graph4.hideBulletsCount = 30; 
    chart.addGraph(graph4); 
    // 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"); 
}); 



     </script> 

Answer 1

은 그냥이 같은 요소의 CSS 속성을 설정, 쉬운 것입니다을 :

$('element').css(visibility,hidden); <-- to hide it, and visible to show it, maybe you could add all this to a click event on the submit form, also you can use some other techniques like fadeIn() and fadeOut(). 

Answer 2

나는 당신이 원하는 것을 확실하지 않다 ... 아래의 코드를 확인 ...

HTML : 나는 당신의 질문이다 이해하면

function toggle(){ 
    var graph=this.parentNode.getElementsByName('graph')[0]; 
    var style=window.getComputedStyle(graph).display; 
    if(style=='none'){ 
      graph.style.display='online'; // you can also use 'block' instead of 'online' 
      this.innerHTML='Show'; 
    }else{ 
      graph.style.display='none'; 
      this.innerHTML='Hide'; 
    } 
} 

Answer 3

:

<div> 
    <div name="graph"></div> 
    <button type="button" onClick="toggle()"></button> 
</div> 

자바 스크립트 양식을 제출하지 않고 태그 안의 내용 표시/숨기기

$(document).ready(function() { 
    $('.cssbutton').click(function(event) { 
     event.preventDefault();     
     $('#chartdiv').toggle(); 
    }); 
}); 

Answer 4

설정 표시 없음

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

에 "chartdiv"의 속성은 Valider 버튼에 클릭 이벤트를 추가합니다.

<input name="send_button" type="submit" value="Valider" class="cssbutton" onclick="showHide();" /> 

및

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script> 

<script type="text/javascript" language="javascript"> 
var flag=0; 
function showHide() 
{ 
if(flag==0){ 
    $('#chartdiv').show(); 
    flag=1; 
    } 
    else 
    { 
    $('#chartdiv').hide(); 
    flag=0; 
    } 
} 
</script> 

내가이