jQuery修改Google Charts过滤器颜色遇'Cannot set property color of undefined'错误

我懂你遇到的困扰——之前用原生JavaScript能搞定ChartRangeFilter的线条颜色，换成jQuery就碰上个Cannot set property 'color' of undefined的报错。其实问题核心在于ChartRangeFilter内部的图表实例得等仪表盘完全绘制好才能访问，jQuery的时机或者访问逻辑没踩对节奏，下面给你几个靠谱的解决办法：

方法一：在ControlWrapper初始化时直接配置（最稳妥） #

根本不用等绘制完再修改，创建ControlWrapper的时候，直接通过ui.chartOptions.series定义线条颜色就行，从根源避免实例未定义的问题：

var rangeFilter = new google.visualization.ControlWrapper({
  controlType: 'ChartRangeFilter',
  containerId: 'range_filter_div',
  options: {
    filterColumnIndex: 0,
    ui: {
      chartOptions: {
        chartArea: { height: '30%', width: '70%' },
        // 直接设置过滤器内线条的颜色，这里以第1个数据系列为例（索引0）
        series: {
          0: { color: '#2ecc71' }
        }
      },
      chartView: { columns: [0, 1] }
    }
  }
});

方法二：利用ready事件获取过滤器实例修改 #

如果一定要在绘制后调整颜色，可以监听过滤器的ready事件，等它初始化完成后再操作内部图表实例：

// 放在dash.draw(data);之后
google.visualization.events.addListener(rangeFilter, 'ready', function() {
  // 获取过滤器内部的LineChart实例
  var filterInnerChart = rangeFilter.getChart();
  // 修改指定系列的线条颜色
  filterInnerChart.setOption('series.0.color', '#ff0000');
  // 重新绘制过滤器生效
  filterInnerChart.draw();
});

针对你现有代码的额外提醒 #

你代码里重复引入了两个版本的jQuery（1.11.1和1.11.0），建议只保留一个，避免潜在的兼容性冲突。另外之前报错的原因大概率是在$(document).ready()里过早访问了还没初始化的图表实例，换成上面两种方法就能解决。

内容的提问来源于stack exchange，提问作者SnowSG