1

Google Charts でグラフを作成し、いくつかのフィルターを適用したいと考えています。凡例に表示される列 (ピート、ジョン、カール、アンドレア) ではなく、行 (グラフの下の表の主題) でグラフをフィルター処理する方法を見つけました。

jsFiddle http://jsfiddle.net/fcqeA/で私のグラフを参照してください。

//Filtering subjects:
var compPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'control2',
  'options': {
    'filterColumnLabel': 'Subject',
    'ui': {
      'labelStacking': 'vertical',
      'allowTyping': false,
      'allowMultiple': true
    }
  }
});

しかし、今では伝説のアイテムで...何かを見落としていたと思いますが、本当に見つけられません...私の質問が明確であることを願っています

4

1 に答える 1

1

ついに方法を見つけました、もっと簡単な方法があるだろうと思いましたが、mabyはそうではありません

// Place graph
var drawChart = new google.visualization.Dashboard(document.getElementById('dashboard')).bind([compPicker], [chart, table]);;
drawChart.draw(data);

// Filter respondents
document.getElementById('names').onchange = function(evt) {
if (evt.target.selectedIndex == 0) {
  // Expectancy
  chart.setView({'columns': [0,1,2,3,4]});
  chart.setOption('colors', ["#FFC000","#00b0f0","#ff0000","#92d050"]);
} else if (evt.target.selectedIndex == 1) {
  chart.setView({'columns':  [0,1]});
  chart.setOption('colors', ["#FFC000"]);
} else if (evt.target.selectedIndex == 2) {
  chart.setView({'columns':  [0,2]});
  chart.setOption('colors', ["#00b0f0"]);
} else if (evt.target.selectedIndex == 3) {
  chart.setView({'columns':  [0,3]});
  chart.setOption('colors', ["#ff0000"]);
} else if (evt.target.selectedIndex == 4) {
  chart.setView({'columns':  [0,4]});
  chart.setOption('colors', ["#92d050"]);
} else {
   chart.setView({'columns': [0,1,2,3,4]});
  chart.setOption('colors', ["#FFC000","#00b0f0","#ff0000","#92d050"]);     
}
drawChart.draw(data);
};

<select id="names">
  <option value="all">all</option>
  <option value="pete">pete</option>
  <option value="john">john</option>
  <option value="carl">carl</option>
  <option value="andrea">andrea</option>
</select>

完全なコードと例http://jsfiddle.net/fcqeA/1/

于 2012-09-18T13:59:36.850 に答える