javascript - 如何在用户单击提交按钮后立即创建图形页面模式

Question

我正在根据用户输入填充谷歌图表。现在正在同一页面中生成图表。

这是我的页面图片的链接: https://ibb.co/fAm7BQ

下面是我的 HTML 代码:

<form method="post">
  <label>CUF PERFORMANCE</label> &nbsp&nbsp&nbsp
  <select id="select" name="options">
    <option>Select The Value</option>
    <option id="hourly" value="a">Hourly</option>
    <option id="daily" value="b">Daily</option>
    <option id="monthly" value="c">Monthly</option>
    <option id="yearly" value="d">Yearly</option> 
  </select><br/><br/>

  <label id="from" style="display:none;">Enter starting Date and Time</label>

  <input id="dateInputone" name="dateipone" type="datetime-local" step="600" onblur="validate_time(this.value)" style="display:none;">

  <label id="to" style="display:none;">Enter Ending Date and Time</label>

  <input id="dateInputtwo" name="dateiptwo" type="datetime-local" step="600" style="display:none;">
  <br/><br/>
  <label for="Inverter">Inverter</label>
  <select name="ino">
    <option>Select The Value</option>
      <option value="1">Inverter 1</option>
    <option value="2">Inverter 2 </option>
      <option value="3">Inverter 3</option>
      <option value="4">Inverter 4</option> 
      <option value="5">Inverter 5</option> 
      <option value="6">Inverter 6</option>
  </select><br/><br/>

  <input type="submit" value="submit" onclick="myFunction()">

下面是我的谷歌图表脚本代码

google.charts.load('current', {
  'packages': ['line', 'bar', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var arr1 = <?php echo json_encode($narray) ?>;
  var dataArray = [];
  for (i = 0; i < arr1.length; i++) {
    var implicitArray = [];
    implicitArray.push(arr1[i].timestamp);
    implicitArray.push(arr1[i].sum);
    implicitArray.push(arr1[i].sum / (6 * 72 * 245));
    dataArray.push(implicitArray);
  }

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Days');
  data.addColumn('number', "Grid Power Total");
  data.addColumn('number', "CUF");
  data.addRows(dataArray);

  var linematerialOptions = {
    chart: {
      title: 'CUF CALCULATION'
    },
    width: 400,
    height: 400,
    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {
        axis: 'CUF'
      },

    },
    axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
        CUF: {
          label: 'CUF'
        }
      }
    }
  };

  var linechart = new google.charts.Line(document.getElementById('chart_div'));
  linechart.draw(data, linematerialOptions);

  var barmaterialOptions = {
    width: 400,
    height: 400,
    series: {
      0: {
        axis: 'CUF'
      }, // Bind series 0 to an axis named 'distance'.
      1: {
        axis: 'Gridpowertotal'
      } // Bind series 1 to an axis named 'brightness'.
    },
    axes: {
      y: {
        CUF: {
          label: 'CUF'
        }, // Left y-axis.
        Gridpowertotal: {
          side: 'right',
          label: 'Grid Power Total'
        } // Right y-axis.
      }
    }
  };
  alert(barmaterialOptions);
  var barchart = new google.visualization.BarChart(document.getElementById('chartdiv'));
  barchart.draw(data, google.charts.Bar.convertOptions(barmaterialOptions));
}

这是我希望用户输入值并单击提交后的图片链接:https://ibb.co/cbytkk

Answer 1

  <!--modal table -->
    <div id="myModal" class="modal fade in">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
       <a class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a>
       <h4 class="modal-title">CUF Graph</h4>
       </div>

      <div class="modal-body">                
       <table class="columns">
        <tr>
         <td><div id="chart_div" style="border: 1px solid #ccc"></div></td>
         <td><div id="chartdiv" style="border: 1px solid #ccc"></div></td>
        </tr>
       </table>
      </div>

     <div class="modal-footer">
      <div class="btn-group">
      <button id="change-chart"  class="btn btn-danger">Bar Chart</button>
      </div>
     </div>
    </div>
   </div>
  </div>

只是用代码附上了用于打印图表的表格..

您可以使用下面的代码片段链接作为引用

http://bootsnipp.com/snippets/featured/modified-modal-buttons