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>

我有这段代码加载图表：

  <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

使用jquery很简单，只需设置元素的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：

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

JavaScript的：

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标签内显示/隐藏什么内容而不提交表单，

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

Answer 4

将“chartdiv”的显示属性设置为无

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

向 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>

我希望这有助于你

隐藏并显示div

4 个答案: