Question

我有一张组合表。我想在单击按钮时更改图表中的数据。没有仪表板时，我已经可以完美地工作了。我尝试使代码与仪表板一起使用，但没有成功。

这是我最终得到的代码：

  function majorChart(){
            var dataMajor = google.visualization.arrayToDataTable([
                ['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'},  {type: 'string', role: 'annotation'}],
                 <?php
        $combosql = " SELECT dancer_id1, dancer_name, dancer_placement1, number_competitors1, feis_entered, date, was_recalled, recall1 from mark_cards1 where dancer_id1='$childId' AND major = 'yes' ORDER BY date ASC";
        $ComboRes = mysqli_query($con,$combosql);

        while ($comboRow=mysqli_fetch_array($ComboRes)){
            $dancerName = $comboRow["dancer_name"];
            $orgDate = $comboRow["date"];
            $date = date("M-d-Y", strtotime($orgDate));
            $competitors = $comboRow['number_competitors1'];
            $was_recalled = $comboRow["was_recalled"];
            $recalled = $comboRow["recall1"];
            $not_recalled = $competitors - $recalled;
            $place = $comboRow['dancer_placement1'];
            $place_num = intval($place);
            $feis = $comboRow['feis_entered'];
            list($dancer_placed) = explode(' ', $place);

            if($was_recalled == ''){
                $got_recalled = 'Yes';
            }elseif($was_recalled =='-'){
                $got_recalled == 'No';
            }


            echo "['$feis - $date', -$not_recalled, 'Total Dancers Not Placed: $not_recalled', $recalled, 'Total Dancers Placed: $recalled', $was_recalled $place_num, '$dancerName placed $dancer_placed out of $competitors total dancers', '$place'],";
        }
                ?>
                ]);

            //champion data
            var dataChampion = google.visualization.arrayToDataTable([
                ['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'},  {type: 'string', role: 'annotation'}],
                 <?php
        $combosql = " SELECT dancer_id1, dancer_name, dancer_placement1, number_competitors1, feis_entered, date, was_recalled, recall1 from mark_cards1 where dancer_id1='$childId' AND champion = 'yes' ORDER BY date ASC";
        $ComboRes = mysqli_query($con,$combosql);

        while ($comboRow=mysqli_fetch_array($ComboRes)){
            $dancerName = $comboRow["dancer_name"];
            $orgDate = $comboRow["date"];
            $date = date("M-d-Y", strtotime($orgDate));
            $competitors = $comboRow["number_competitors1"];
            $was_recalled = $comboRow["was_recalled"];
            $recalled = $comboRow["recall1"];
            $not_recalled = $competitors - $recalled;
            $place = $comboRow["dancer_placement1"];
            $place_num = intval($place);
            $feis = $comboRow["feis_entered"];
            list($dancer_placed) = explode(' ', $place);

            if($was_recalled == ''){
                $got_recalled = 'Yes';
            }elseif($was_recalled == '-'){
                $got_recalled = 'No';
            }



            echo "['$feis - $date', -$not_recalled, 'Total Dancers Not Placed: $not_recalled', $recalled, 'Total Dancers Placed: $recalled', $was_recalled $place_num, '$dancerName placed $dancer_placed out of $competitors total dancers', '$place'],";

        }

        ?>

            ]);


            // Create a dashboard.
    var dashboard = new google.visualization.Dashboard(
        document.getElementById('major_chart'));


    // Create a search filter, passing some options
    var searchfilter = new google.visualization.ControlWrapper({
      'controlType': 'StringFilter',
      'containerId': 'filter_major',
      'options': {
        'filterColumnLabel': 'feis',
        'ui': {
            label: 'Filter feis'
        },
        'matchType':  'any'
      }
    });


             // Create a combo chart, passing some options
    var options = new google.visualization.ChartWrapper({
      'chartType': 'ComboChart',
      'containerId': 'major',
      'options': {
        tooltip: {isHtml: true},
                legend:'none',
                chartArea: {
                    height: '100%',
                    width: '100%',
                    top: 16,
                    right: 16,
                    bottom: 60,
                    left: 60
                },

                colors: ['#03a9f4', '#9ACB00', '#616161'],
                hAxis: {
                    title: 'Feis Competiton and date'
                },
                height: '100%',
                isStacked: true,
                legend: {
                    position: 'none'
                },
                pointSize: 6,
                series: {
                    2: {
                        type: 'line'
                    }
                },
                seriesType: 'bars',
                vAxis: {
                    ticks: [
                        {v: -40, f: '40'},
                        {v: -30, f: '30'},
                        {v: -20, f: '20'},
                        {v: -10, f: '10'},
                        0,
                        10,
                        20,
                        30,
                        40
                    ],
                    title: 'Placement'
                },
                width: '100%'
      },

    });


    dashboard.bind(searchfilter, options);

    // Draw the dashboard.
    dashboard.draw(dataMajor);

    document.getElementById('tropy_icon').addEventListener('click', function () {
        //options.slices[0].color = 'yellow';
        dashboard.draw(dataMajor);
    }, false);

    document.getElementById('medal_icon').addEventListener('click', function () {
        //options.slices[0].color = 'yellow';
        dashboard.draw(dataChampion);
    }, false);


  }

我想单击一个按钮，前两个图表的数据更改。第三个按钮也将具有不同的数据，但它也是不同的图表。

我还尝试在3个不同的div中创建3个独立的图表。并尝试在三个div之间切换。

在这种情况下，当我单击按钮1时，将显示major_chart，而Champion_chart将隐藏当我单击按钮2时，major_chart将隐藏，champion_chart将显示

当我单击按钮3时，将会显示grades_chart，但不会隐藏major_chart或2，这取决于可见的内容。

在grades_chart出现后，我无法将其隐藏。我可以在major_chart和Champion_chart之间切换，但不能在grades_chart之间切换。

是这样的：底部的空白应该是grades_chart

因此，我尝试删除了grades_chart，并且仅使用2起作用。这意味着当我单击按钮1时，major_chart显示，champion_chart隐藏。当我单击按钮2时，会显示Champion_chart，而major_chart隐藏。

另一个问题是，当我单击按钮2时，champion_chart小于实际大小。

页面加载时或单击button1时，它看起来像这样：

当我单击按钮2时会显示Champion_chart，但它较小，并且宽度和高度应与major_chart相同

此方案的代码：

<script>
                      function switchMajor() {
                              if (document.getElementById('major_chart')) {
                                  if (document.getElementById('major_chart').style.display == 'none') {
                                      document.getElementById('major_chart').style.display = 'block';
                                      document.getElementById('champion_chart').style.display = 'none';

                                      document.getElementById('grades_chart').style.display == 'none';
                                  }
                              }
                      }

                      function switchChampion() {
                              if (document.getElementById('champion_chart')) {
                                  if (document.getElementById('champion_chart').style.display == 'none') {
                                      document.getElementById('champion_chart').style.display = 'block';
                                      document.getElementById('major_chart').style.display = 'none';
                                      document.getElementById('grades_chart').style.display == 'none';
                                  }
                              }
                      }

                      function switchGrades() {
                          if (document.getElementById('grades_chart')) {
                              if (document.getElementById('grades_chart').style.display == 'none') {
                                  document.getElementById('grades_chart').style.display = 'block';
                                  document.getElementById('champion_chart').style.display = 'none';

                                      document.getElementById('grades_chart').style.display == 'none';
                              }
                          }
                      }
                  </script>

当我从脚本中删除grades_chart时，它可以正确切换，但是Champion_chart仍然很小。

编辑

我可以使用以下脚本在3个div之间切换。

<script>
                      function switchMajor() {
                          var major = document.getElementById('major_chart');
                          var champion = document.getElementById('champion_chart');
                          var grades = document.getElementById('grades_chart');
                          if (major.style.display === 'none'){
                              major.style.display = 'block';
                              champion.style.display = 'none';
                              grades.style.display = 'none';
                          } 
                      }

                      function switchChampion() {
                          var major = document.getElementById('major_chart');
                          var champion = document.getElementById('champion_chart');
                          var grades = document.getElementById('grades_chart');
                          if (champion.style.display === 'none'){
                              champion.style.display = 'block';
                              major.style.display = 'none';
                              grades.style.display = 'none';

                          }
                      }

                      function switchGrades() {
                          var major = document.getElementById('major_chart');
                          var champion = document.getElementById('champion_chart');
                          var grades = document.getElementById('grades_chart');
                          if (grades.style.display === 'none'){
                              grades.style.display = 'block';
                              major.style.display = 'none';
                              champion.style.display = 'none';

                          } 
                      }
                  </script>

现在唯一的问题是其他两个图表的大小不正确。

点击按钮时更改Google图表数据

0 个答案: