javascript - jquery中获取类别过滤器颜色的方法

标签 javascript jquery google-visualization

我收到错误“无法设置未定义的属性‘颜色’”。我使用了一种方法来获取 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/

最佳答案

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

看看它在 if block 中的运行情况，条件是 col > 0。您可能需要适本地修改 for 循环。

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);

        });
    });
  }
<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>

关于javascript - jquery中获取类别过滤器颜色的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50341454/

上一篇：javascript - 使用 jQuery 进行按键传递

下一篇：javascript - 在循环中为列表对象添加属性并返回该对象，但未应用

相关文章：

我点击时的 javascript 选项卡

javascript - 谷歌线图 - 设置较小的幅度

php - Google 图表 API 不解码 HTML 实体，尽管我将它们解码了

javascript - axios.put ReactJS

javascript - javascript 中的 toFixed 方法缺乏精度

javascript - 在我的代码中哪里引入延迟函数

javascript - 使用 .is() 方法获取具有特定 ID 的元素

javascript - 文本框不接受+号

php - 显示将用户带到网站的 Google 关键字

google-visualization - Google Geochart(所有国家/地区)

©2024 IT工具网  联系我们