javascript - Google Charts - 仪表板打开/关闭数据系列

Question

这个问题已经有答案了:

How to add colors to spefic columns in Google Charts (1 个回答)

已关闭 5 年前。

一如既往，我感谢这里的专家!

该复选框应切换图表中的第五列。 (红色球门线)

函数colToggle()一般来说是有效的，因为 switch让我向右case 。

chart.setView([0, 1, 2, 3, 4]);没有做任何事情，我不确定我是否得到了正确的方法或语法。

知道如何切换线路吗？ (考虑仪表板设置)

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawDashboard(0, 0);
};

function drawDashboard(p1, v1) {

  //var urlString_temp = 'https://httpbin.org/get'; //HTTP Test server that accepts GET/Post calls
  var urlString_temp = 'https://jsonplaceholder.typicode.com/users'; //HTTP Test server that accepts GET/Post calls

  $.ajax({
    type: 'GET',
    dataType: 'json',
    contentType: "application/json",
    //url: urlString,
    url: urlString_temp,
    success: function(result) {

      //Manually loaded "result" with JSON that normally comes from "urlString".   
      result = [{
        calDay: new Date(2017, 10, 15),
        'v1': 100,
        'v2': 500,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZRS',
        'p4': 'A'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 110,
        'v2': 510,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZRS',
        'p4': 'A'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 120,
        'v2': 520,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZRS',
        'p4': 'A'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 130,
        'v2': 530,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZFE',
        'p4': 'B'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 140,
        'v2': 540,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZFE',
        'p4': 'B'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 150,
        'v2': 550,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZFE',
        'p4': 'B'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 160,
        'v2': 560,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZ',
        'p4': 'C'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 170,
        'v2': 570,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZ',
        'p4': 'C'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 180,
        'v2': 580,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZ',
        'p4': 'C'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 190,
        'v2': 590,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZRS',
        'p4': 'D'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 200,
        'v2': 600,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZRS',
        'p4': 'D'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 210,
        'v2': 610,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZRS',
        'p4': 'D'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 220,
        'v2': 620,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZFE',
        'p4': 'E'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 230,
        'v2': 630,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZFE',
        'p4': 'E'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 240,
        'v2': 640,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZFE',
        'p4': 'E'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 250,
        'v2': 650,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZ',
        'p4': 'F'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 260,
        'v2': 660,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZ',
        'p4': 'F'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 270,
        'v2': 670,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZ',
        'p4': 'F'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 280,
        'v2': 680,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZRS',
        'p4': 'G'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 290,
        'v2': 690,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZRS',
        'p4': 'G'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 300,
        'v2': 700,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZRS',
        'p4': 'G'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 310,
        'v2': 710,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZFE',
        'p4': 'H'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 320,
        'v2': 720,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZFE',
        'p4': 'H'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 330,
        'v2': 730,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZFE',
        'p4': 'H'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 340,
        'v2': 740,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZ',
        'p4': 'I'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 350,
        'v2': 750,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZ',
        'p4': 'I'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 360,
        'v2': 760,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZ',
        'p4': 'I'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 370,
        'v2': 770,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZRS',
        'p4': 'J'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 380,
        'v2': 780,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZRS',
        'p4': 'J'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 390,
        'v2': 790,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZRS',
        'p4': 'J'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 400,
        'v2': 800,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZFE',
        'p4': 'K'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 410,
        'v2': 810,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZFE',
        'p4': 'K'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 420,
        'v2': 820,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZFE',
        'p4': 'K'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 430,
        'v2': 830,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZ',
        'p4': 'L'
      }, {
        calDay: new Date(2017, 10, 10),
        'v1': 440,
        'v2': 840,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZ',
        'p4': 'L'
      }, {
        calDay: new Date(2017, 9, 31),
        'v1': 450,
        'v2': 850,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZ',
        'p4': 'L'
      }];

      //Create DataTable
      var data = new google.visualization.DataTable();

      //Add Columns
      data.addColumn('date', 'Calendar Day'); //0 calDay

      data.addColumn('number', 'EZRS'); //1 case v1 to bar1
      data.addColumn('number', 'EZFE'); //2 case v1 to bar2
      data.addColumn('number', 'EZ'); //3 case v1 to bar3
      data.addColumn('number', 'Other'); //4 case v1 to bar4

      data.addColumn('number', 'Goal'); //5 v2 goal line

      data.addColumn('string', 'Overhead Group'); //6 p1
      data.addColumn('string', 'MRP'); //7 p2
      data.addColumn('string', 'MBR Stock Category'); //8 p3
      data.addColumn('string', 'Material'); //9 p4

      //Add Rows
      var dataArray = [];
      $.each(result, function(i, obj) {

        var bar1 = 0; //EZRS
        var bar2 = 0; //EZFE
        var bar3 = 0; //EZ
        var bar4 = 0; //Other

        switch (obj.p3) {
          case 'EZRS':
            bar1 = obj.v1;
            break;
          case 'EZFE':
            bar2 = obj.v1;
            break;
          case 'EZ':
            bar3 = obj.v1;
            break;
          default:
            bar4 = obj.v1;
        }

        dataArray.push([
          obj.calDay,
          bar1, bar2, bar3, bar4, obj.v2,
          obj.p1, obj.p2, obj.p3, obj.p4,
        ]);
      });
      data.addRows(dataArray);

      //Create Data View
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

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

      //When this is commented out - the category picker works
      var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'div_categoryPicker1',
        //'view': { columns: [0, 1, 2, 3, 4] },
        'options': {
          'filterColumnIndex': 0,
          'ui': {
            'chartType': 'LineChart',
            'chartView': {
              'columns': [0, 1]
            },
            'chartOptions': {
              'height': 50,
              'chartArea': {
                'width': '80%'
              },
              'series': {
                //column 1 is first v1 - Start couting 0 here for series.
                0: {
                  color: 'white'
                }
              },
            }, //END chartOptions                        
          } //END ui
        } //END 'options'
      }); //END categoryPicker1

      var categoryPicker2 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'div_categoryPicker2',
        'options': {
          'filterColumnIndex': 8, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':',
            'allowTyping': false,
            'allowMultiple': false
          }
        }
      });

      var categoryPicker3 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'div_categoryPicker3',
        'options': {
          'filterColumnIndex': 6, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':',
            'allowTyping': false,
            'allowMultiple': false
          }
        }
      });
      var categoryPicker4 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'div_categoryPicker4',
        'options': {
          'filterColumnIndex': 7, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':',
            'allowTyping': false,
            'allowMultiple': false
          }
        }
      });

      var proxyTable = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'div_proxyTable',
        'options': {
          page: 'enable',
          pageSize: '9' //to limit the render time with large data sets
        },
        'view': {
          columns: [0, 1, 2, 3, 4, 5, 8, 6, 7]
        }
      });

      var chart = new google.visualization.ChartWrapper({
        'chartType': 'ComboChart',
        'containerId': 'div_chart',
        'view': {
          columns: [0, 1, 2, 3, 4, 5]
        },
        'options': {
          width: '100%',
          height: 'auto',
          seriesType: 'bars',
          isStacked: true,
          series: {
            //column 1 is first v1 - Start couting 0 here for series.
            0: {
              color: 'rgb(0, 86, 145)'
            },
            1: {
              color: 'rgb(0, 142, 207)'
            },
            2: {
              color: 'rgb(127, 198, 231)'
            },
            3: {
              color: 'rgb(191,192,194)'
            },
            4: {
              color: 'rgb(226, 0, 21)',
              type: 'line',
            }
          },
        }
      });

      //Object binding
      dashboard.bind([categoryPicker1, categoryPicker2, categoryPicker3, categoryPicker4], proxyTable);
      dashboard.bind(categoryPicker2, categoryPicker3).bind(categoryPicker3, categoryPicker4);


      //Draw dashboard
      dashboard.draw(view);

      //Event listeners
      google.visualization.events.addListener(dashboard, 'ready', function() {
        redrawChart();

        if (document.addEventListener) {
          document.getElementById("ck_colToggle").addEventListener("click", function() {
            colToggle();
          });
        };

        //Category Picker State Change
        google.visualization.events.addListener(categoryPicker1, 'statechange', function() {
          redrawChart();
        });
        google.visualization.events.addListener(categoryPicker2, 'statechange', function() {
          redrawChart();
        });
        google.visualization.events.addListener(categoryPicker3, 'statechange', function() {
          redrawChart();
        });
        google.visualization.events.addListener(categoryPicker4, 'statechange', function() {
          redrawChart();
        });

      });

      function redrawChart() {
        chart.setDataTable(google.visualization.data.group(
          proxyTable.getDataTable(), [0], [{
            'column': 1,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 2,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 3,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 4,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 5,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }]));

        chart.draw();
      } //END function redrawChart()


      function colToggle() {
        var isChecked = document.getElementById("ck_colToggle").checked;

        switch (isChecked) {
          case true:
            console.log('isTrue');
            break;
          case false:
            console.log('isFalse');
            chart.setView([0, 1, 2, 3, 4]);
            
            break;
          default:
            console.log('other')
        }
        chart.draw();
      }; //END function colToggle()

    } //END  success: function (result) {
  }); //END  $.ajax({
} //END  function drawChart()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<span>
  <input id="ck_colToggle" type="checkbox" checked=""> 
  <label for="ck_colToggle">Goal (On/Off)</label>
</span>

<hr/>

<div id="div_dashboard" style="">
  <table>
    <tr>
      <td>
        <div id="div_categoryPicker2" style="margin-right:10px;"></div>
      </td>
      <td>
        <div id="div_categoryPicker3" style="margin-right:10px;"></div>
      </td>
      <td>
        <div id="div_categoryPicker4" style="padding-right:10px;"></div>
      </td>

    </tr>
  </table>
  <div id="div_chart" style=""></div>
  <div id="div_categoryPicker1" style=""></div>
  <div id="div_proxyTable" style=""></div>
</div>

Answer 1

评论者提供了这个有用的链接来回答我的问题。

check this answer, which uses checkboxes to turn off one or more series... – WhiteHat Jan 4 at 22:08

谢谢!