如何在jquery中获取类别过滤器的颜色

Question

我收到错误“无法设置未定义的属性'颜色'”。我用一种方法在javascript中获取过滤器/行的颜色，但显然在使用jQuery时它不起作用。还有其他方法可以改变过滤器/线的颜色。

google.charts.load('current', {
    // callback: drawChartYear,
    packages: ['controls']
  });
  google.charts.setOnLoadCallback(drawChartYear);

  function drawChartYear() {
    var elements = document.getElementsByTagName('a')
    while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.innerHTML = 'Line Graph by Decades';
    a.setAttribute('onClick', 'drawChartDecade()');
    document.getElementById('text_div').appendChild(a);
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1xUzHqQjFRV3CcCEmsVUezz4hzwHDxPFW15f5Da0xBS0/edit#gid=0&headers=1&tq?range=A:AA");
    query.send(handleQueryResponse);
  }

  function drawChartDecade() {
    var elements = document.getElementsByTagName('a')
    while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.innerHTML = 'Line Graph by Year';
    a.setAttribute('onClick', 'drawChartYear()');
    document.getElementById('text_div').appendChild(a);
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mX8ndZxq0lVHCpi4-LQKdut3kWgi3gYdozyxMw8fDxA/edit#gid=0");
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    var data = response.getDataTable();
    var rangeFilter = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'range_filter_div',
      options: {
        filterColumnIndex: 0,
        ui: {
          chartOptions: {
            chartArea: {
              height: '30%',
              width: '70%'
            }
          },
          chartView: {
            columns: [0, 1]
          }
        }
      }
    });
    var chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chart_div',
      options: {
        legend: {
          textStyle: {
            fontSize: "8"
          }
        },
        chartArea: {
          width: '70%'
        }
      }
    });
    // Create the dashboard
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    // bind the chart to the filter
    dash.bind([rangeFilter], [chart]);
    // draw the dashboard
    dash.draw(data);
    var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      columns.push(i);
      if (i > 0) {
        series[i - 1] = {};
      }
    }
    google.visualization.events.addListener(chart, 'select', function() {
      var sel = dash.getSelection();
      // if selection length is 0, we deselected an element
      if (sel.length > 0) {
        // if row is undefined, we clicked on the legend
        if (sel[0].row === null) {
          var col = sel[0].column;
          if (columns[col] == col) {
            // hide the data series
            columns[col] = {
              label: data.getColumnLabel(col),
              type: data.getColumnType(col),
              calc: function() {
                return null;
              }
            };
            // grey out the legend entry
            series[col - 1].color = '#CCCCCC';
          } else {
            // show the data series
            columns[col] = col;
            series[col - 1].color = null;
          }
          // set series option & view columns
          chart.setOption('series', series);
          chart.setView({
            columns: columns
          });
          dash.draw(data);
        }
      }
    });
    $(window).resize(function() {
      drawChartYear();
    });
    $(document).ready(function() {
        var checkboxes = $(".selectall");

        $('#selectall').click(function(event) {
            if (this.checked) {
              for (var col = 0; col < columns.length; col++) {
                columns[col] = {
                  label: data.getColumnLabel(col),
                  type: data.getColumnType(col),
                  calc: function() {
                    return null;
                  }
                }
                series[col - 1].color = '#CCCCCC';
              }

            } else {
              this.checked = false;
              for (var col = 0; col < columns.length; col++) {
                columns[col] = col;
                series[col - 1].color = null
              }
            }

          // set series option & view columns
          chart.setOption('series', series);
          chart.setView({
            columns: columns
          });
          dash.draw(data);

        });
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="dashboard">
  <div id="text_div"></div>
  <br>
  <label class="checkbox">
        <input type="checkbox" id="selectall" />Deselect All</label>
  <div id="chart_div" style="min-height: 550px; min-width: 700px;"></div>
  <div id="range_filter_div" style="min-height: 150px; min-width: 700px;"></div>
</div>

我可以在https://jsfiddle.net/SnowSG/mgnwft39/

访问我的代码

Answer 1

并不是说你分配颜色的方式不起作用，而是系列[col-1]不存在。在#selectall处理程序中，当col = 0时，您正在寻找系列[-1];

在if块内部查看它是如何运行的，条件是col＆gt;你可能需要适当地修改for循环。

＆＃13;

＆＃13;

google.charts.load('current', {
    // callback: drawChartYear,
    packages: ['controls']
  });
  google.charts.setOnLoadCallback(drawChartYear);

  function drawChartYear() {
    var elements = document.getElementsByTagName('a')
    while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.innerHTML = 'Line Graph by Decades';
    a.setAttribute('onClick', 'drawChartDecade()');
    document.getElementById('text_div').appendChild(a);
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1xUzHqQjFRV3CcCEmsVUezz4hzwHDxPFW15f5Da0xBS0/edit#gid=0&headers=1&tq?range=A:AA");
    query.send(handleQueryResponse);
  }

  function drawChartDecade() {
    var elements = document.getElementsByTagName('a')
    while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.innerHTML = 'Line Graph by Year';
    a.setAttribute('onClick', 'drawChartYear()');
    document.getElementById('text_div').appendChild(a);
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mX8ndZxq0lVHCpi4-LQKdut3kWgi3gYdozyxMw8fDxA/edit#gid=0");
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    var data = response.getDataTable();
    var rangeFilter = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'range_filter_div',
      options: {
        filterColumnIndex: 0,
        ui: {
          chartOptions: {
            chartArea: {
              height: '30%',
              width: '70%'
            }
          },
          chartView: {
            columns: [0, 1]
          }
        }
      }
    });
    var chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chart_div',
      options: {
        legend: {
          textStyle: {
            fontSize: "8"
          }
        },
        chartArea: {
          width: '70%'
        }
      }
    });
    // Create the dashboard
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    // bind the chart to the filter
    dash.bind([rangeFilter], [chart]);
    // draw the dashboard
    dash.draw(data);
    var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      columns.push(i);
      if (i > 0) {
        series[i - 1] = {};
      }
    }
    google.visualization.events.addListener(chart, 'select', function() {
      var sel = dash.getSelection();
      // if selection length is 0, we deselected an element
      if (sel.length > 0) {
        // if row is undefined, we clicked on the legend
        if (sel[0].row === null) {
          var col = sel[0].column;
          if (columns[col] == col) {
            // hide the data series
            columns[col] = {
              label: data.getColumnLabel(col),
              type: data.getColumnType(col),
              calc: function() {
                return null;
              }
            };
            // grey out the legend entry
            series[col - 1].color = '#CCCCCC';
          } else {
            // show the data series
            columns[col] = col;
            series[col - 1].color = null;
          }
          // set series option & view columns
          chart.setOption('series', series);
          chart.setView({
            columns: columns
          });
          dash.draw(data);
        }
      }
    });
    $(window).resize(function() {
      drawChartYear();
    });
    $(document).ready(function() {
        var checkboxes = $(".selectall");

        $('#selectall').click(function(event) {
            if (this.checked) {
              for (var col = 0; col < columns.length; col++) {
                columns[col] = {
                  label: data.getColumnLabel(col),
                  type: data.getColumnType(col),
                  calc: function() {
                    return null;
                  }
                }
                if(col > 0) {
                	series[col - 1].color = '#CCCCCC';
                }
              };

            } else {
              this.checked = false;
              for (var col = 0; col < columns.length; col++) {
                columns[col] = col;
                if(col > 0) {
                	series[col - 1].color = null
                }
              }
            };

          // set series option & view columns
          chart.setOption('series', series);
          chart.setView({
            columns: columns
          });
          dash.draw(data);

        });
    });
  }

＆＃13;

<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>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="dashboard">
  <div id="text_div"></div>
  <br>
  <label class="checkbox">
        <input type="checkbox" id="selectall" />Deselect All</label>
  <div id="chart_div" style="min-height: 550px; min-width: 700px;"></div>
  <div id="range_filter_div" style="min-height: 150px; min-width: 700px;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;