Próbuję pokazać tylko kolumny, które zaznaczyłem na polach wyboru u góry strony.

Mam 2 wykresy, pierwszy pokazuje wszystkie kolumny, a drugi ma pokazywać kolumny, które sprawdzam na górze.

Drugi wykres to widok pierwszego.

Pracuję z pierwszymi 2 polami wyboru: Boliwia i Ekwador

Używam funkcji setColumns (), aby wybrać kolumnę do wyświetlenia, ale nie mogę użyć w niej wartości null.

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body onload="myFunction()">
    Bolivia<input type="checkbox" id="check1" class="check" name="series" value="1" checked="true" onchange="myFunction()" /><br>
    Ecuador<input type="checkbox" id="check2" class="check" name="series" value="2" checked="true" onchange="myFunction()" /><br>
    Madagascar<input type="checkbox" id="check3" class="check" name="series" value="3" checked="true" onchange="myFunction()" /><br>
    Papua New Guinea<input type="checkbox" id="check4" class="check" name="series" value="4" checked="true" onchange="myFunction()" /><br>
    Rwanda<input type="checkbox" id="check5" class="check" name="series" value="5" checked="true" onchange="myFunction()" /><br>
    Average<input type="checkbox" id="check6" class="check" name="series" value="6" checked="true" onchange="myFunction()" /><br>

    <script type="text/javascript">
      function myFunction(){

        var valCheck1 = parseInt(document.getElementById("check1").value);
        var valCheck2 = parseInt(document.getElementById("check2").value);
        var valCheck3 = parseInt(document.getElementById("check3").value);
        var valCheck4 = parseInt(document.getElementById("check4").value);
        var valCheck5 = parseInt(document.getElementById("check5").value);
        var valCheck6 = parseInt(document.getElementById("check6").value);

        var check1 = document.getElementById("check1");
        var check2 = document.getElementById("check2");
        var check3 = document.getElementById("check3");
        var check4 = document.getElementById("check4");
        var check5 = document.getElementById("check5");
        var check6 = document.getElementById("check6");

        if (check1.checked == 1) {
          var salidaCheck1 = valCheck1;
        }else{
          var salidaCheck1 = 0;
        }
        if (check2.checked == 1) {
          var salidaCheck2 = valCheck2;
        }else{
          var salidaCheck2 = 0;
        }


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

        function drawVisualization() {
          // Some raw data (not necessarily accurate)
          var data = google.visualization.arrayToDataTable([
            ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
            ['2004/05',  165,      938,         522,             998,           450,      614.6],
            ['2005/06',  135,      1120,        599,             1268,          288,      682],
            ['2006/07',  157,      1167,        587,             807,           397,      623],
            ['2007/08',  139,      1110,        615,             968,           215,      609.4],
            ['2008/09',  136,      691,         629,             1026,          366,      569.6]
          ]);

          var options = {
            title : 'Monthly Coffee Production by Country',
            vAxis: {title: 'Cups'},
            hAxis: {title: 'Month'},
            seriesType: 'bars',
            lineWidth: 5,
            bar: {1: "95%",2: "95%"},
            series: {5: {type: 'line'}}
           };

          var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
          chart.draw(data, options);

          // create view and hide unwanted columns as before
          var chartview2 = new google.visualization.DataView(data);
          chartview2.setColumns([ 0,salidaCheck1,salidaCheck2 ]);

          var viewOptions = {
            title : 'Monthly Coffee Production by Country',
            vAxis: {title: 'Cups'},
            hAxis: {title: 'Month'},
            seriesType: 'bars',
            lineWidth: 5,
            bar: {1: "95%",2: "95%"},
            series: {5: {type: 'line'}}
          }

          // make a copy of the view to create contiguous index set
          var chartview2_copy = new google.visualization.DataView(chartview2);

          // use the view copy with the ColumnChart
          var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
          chart2.draw(chartview2, viewOptions);
        }
      }
    </script>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <hr>
    <div id="chart2" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Ty :)

0
javiertxu18 20 listopad 2019, 15:39

1 odpowiedź

Na koniec stworzyłem nową kolumnę bez nazwy, a funkcją setColumns wymieniam kolumnę na pustą.

Jeśli uruchomisz fragment kodu, uruchom go w trybie GullPage

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body onload="myFunction()">
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <hr>
    Bolivia<input type="checkbox" id="check1" class="check" name="series" value="1" checked="true" onchange="myFunction()" /><br>
    Ecuador<input type="checkbox" id="check2" class="check" name="series" value="2" checked="true" onchange="myFunction()" /><br>
    Madagascar<input type="checkbox" id="check3" class="check" name="series" value="3" checked="true" onchange="myFunction()" /><br>
    Papua New Guinea<input type="checkbox" id="check4" class="check" name="series" value="4" checked="true" onchange="myFunction()" /><br>
    Rwanda<input type="checkbox" id="check5" class="check" name="series" value="5" checked="true" onchange="myFunction()" /><br>
    Average<input type="checkbox" id="check6" class="check" name="series" value="6" checked="true" onchange="myFunction()" /><br><br>
    <div id="chart2" style="width: 900px; height: 500px;"></div>
    <script type="text/javascript">
      function myFunction(){

        var valCheck1 = parseInt(document.getElementById("check1").value);
        var valCheck2 = parseInt(document.getElementById("check2").value);
        var valCheck3 = parseInt(document.getElementById("check3").value);
        var valCheck4 = parseInt(document.getElementById("check4").value);
        var valCheck5 = parseInt(document.getElementById("check5").value);
        var valCheck6 = parseInt(document.getElementById("check6").value);

        var check1 = document.getElementById("check1");
        var check2 = document.getElementById("check2");
        var check3 = document.getElementById("check3");
        var check4 = document.getElementById("check4");
        var check5 = document.getElementById("check5");
        var check6 = document.getElementById("check6");

        var contCheck = 0;

        if (check1.checked == 1) {
          var salidaCheck1 = valCheck1;
          contCheck = 1;
        }else{
          var  salidaCheck1 = 7;
        }
        if (check2.checked == 1) {
          var salidaCheck2 = valCheck2;
          contCheck = 1;
        }else{
          var  salidaCheck2 = 7;
        }
        if (check3.checked == 1) {
          var salidaCheck3 = valCheck3;
          contCheck = 1;
        }else{
          var  salidaCheck3 = 7;
        }
        if (check4.checked == 1) {
          var salidaCheck4 = valCheck4;
          contCheck = 1;
        }else{
          var  salidaCheck4 = 7;
        }
        if (check5.checked == 1) {
          var salidaCheck5 = valCheck5;
          contCheck = 1;
        }else{
          var  salidaCheck5 = 7;
        }
        if (check6.checked == 1) {
          var salidaCheck6 = valCheck6;
          contCheck = 1;
        }else{
          var  salidaCheck6 = 7;
        }


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

        function drawVisualization() {
          // Some raw data (not necessarily accurate)
          var data = google.visualization.arrayToDataTable([
            ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average',''],
            ['2004/05',  165,      938,         522,             998,           450,      614.6,0],
            ['2005/06',  135,      1120,        599,             1268,          288,      682,0],
            ['2006/07',  157,      1167,        587,             807,           397,      623,0],
            ['2007/08',  139,      1110,        615,             968,           215,      609.4,0],
            ['2008/09',  136,      691,         629,             1026,          366,      569.6,0]
          ]);

          var options = {
            title : 'ORIGINAL',
            vAxis: {title: 'Cups'},
            hAxis: {title: 'Month'},
            seriesType: 'bars',
            lineWidth: 2,
            bar: {1: "95%",2: "95%"},
            series: {5: {type: 'line'}}
           };

          var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
          chart.draw(data, options);

          // create view and hide unwanted columns as before
          var chartview2 = new google.visualization.DataView(data);
          chartview2.setColumns([ 0,salidaCheck1,salidaCheck2,salidaCheck3,salidaCheck4,salidaCheck5,salidaCheck6 ]);

          var viewOptions = {
            title : 'VISTA',
            vAxis: {title: 'Cups'},
            hAxis: {title: 'Month'},
            seriesType: 'bars',
            lineWidth: 2,
            bar: {1: "95%",2: "95%"},
            series: {5: {type: 'line'}}
          }

          // make a copy of the view to create contiguous index set
          var chartview2_copy = new google.visualization.DataView(chartview2);

          // use the view copy with the ColumnChart
          var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
          chart2.draw(chartview2, viewOptions);
        }
      }
    </script>
  </body>
</html>
0
javiertxu18 21 listopad 2019, 17:57