谷歌图表，visulization controlle值

我需要改变值时用户选择从谷歌图表下拉值，谷歌图表，visulization controlle值

请检查代码，我需要当用户选择主题的值，则我可以提醒消息或选择的值，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
    <title> 
 
    Google Visualization API Sample 
 
    </title> 
 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    google.load('visualization', '1.1', { 
 
     packages: ['controls'] 
 
    }); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    function drawVisualization() { 
 
     // Prepare the data 
 
     var jsonData = '{"cols":[{"label":"Subject","type":"string"},{"label":"pete","type":"number"},{"label":"john","type":"number"},{"label":"carl","type":"number"},{"label":"andrea","type":"number"}],"rows":[{"c":[{"v":"coolness"},{"v":4.4},{"v":4.3},{"v":3.1},{"v":4.3}]},{"c":[{"v":"sexyness"},{"v":4.2},{"v":3.8},{"v":3.6},{"v":4.8}]},{"c":[{"v":"toughness"},{"v":3.1},{"v":2.7},{"v":2.4},{"v":2.9}]},{"c":[{"v":"chillnes"},{"v":4.4},{"v":4.4},{"v":4.2},{"v":4.5}]},{"c":[{"v":"madness"},{"v":4.6},{"v":4.6},{"v":4},{"v":4.6}]},{"c":[{"v":"lochness"},{"v":3.9},{"v":3.7},{"v":2.9},{"v":3.9}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]}]}'; 
 

 
     console.log(typeof(responseText)); 
 
     console.log(jsonData); 
 

 
     var data = new google.visualization.DataTable(JSON.parse(jsonData)); 
 

 

 

 

 
     var compPicker = new google.visualization.ControlWrapper({ 
 
     'controlType': 'CategoryFilter', 
 
     'containerId': 'control2', 
 
     'options': { 
 
      'filterColumnLabel': 'Subject', 
 
      'ui': { 
 
      'labelStacking': 'vertical', 
 
      'allowTyping': false, 
 
      'allowMultiple': true 
 
      } 
 
     } 
 
     }); 
 
     // Define a chart 
 
     var chart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'ColumnChart', 
 
     'containerId': 'chart1', 
 
     'options': { 
 
      'title': 'Competenties', 
 
      'width': '100%', 
 
      'height': 300, 
 
      'vAxis': { 
 
      viewWindow: { 
 
       max: 5, 
 
       min: 0 
 
      }, 
 
      gridlines: { 
 
       color: '#CCC', 
 
       count: 6 
 
      } 
 
      }, 
 
      bar: { 
 
      groupWidth: '80%' 
 
      }, 
 
      colors: ["#FFC000", "#00b0f0", "#ff0000", "#92d050"] 
 

 
     } 
 
     }); 
 

 
     // Define a table 
 
     var table = new google.visualization.ChartWrapper({ 
 
     'chartType': 'Table', 
 
     'containerId': 'chart2', 
 
     'options': { 
 
      'width': '400px' 
 
     } 
 
     }); 
 

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

 

 
    } 
 

 
    google.setOnLoadCallback(drawVisualization); 
 
    </script> 
 
</head> 
 

 
<body style="font-family: Arial;border: 0 none;"> 
 
    <div id="dashboard"> 
 

 
    <table> 
 
     <tr style='vertical-align: top'> 
 
     <td> 
 
      <div id="control1"></div> 
 
      <div id="control2"></div> 
 
      <div id="control3"></div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <div style="float: left;" id="chart1"></div> 
 
      <div style="float: left;" id="chart2"></div> 
 
      <div style="float: left;" id="chart3"></div> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

JS fiddle link

请帮助我。

感谢

来源

2016-03-07 Ition

使用'statechange'事件侦听器确定选择值...

然后compPicker.getState().selectedValues获得在数组中选择的值...

google.charts.load('current', { 
 
    callback: drawVisualization, 
 
    packages: ['controls', 'corechart', 'table'] 
 
}); 
 

 
function drawVisualization() { 
 
    var jsonData = '{"cols":[{"label":"Subject","type":"string"},{"label":"pete","type":"number"},{"label":"john","type":"number"},{"label":"carl","type":"number"},{"label":"andrea","type":"number"}],"rows":[{"c":[{"v":"coolness"},{"v":4.4},{"v":4.3},{"v":3.1},{"v":4.3}]},{"c":[{"v":"sexyness"},{"v":4.2},{"v":3.8},{"v":3.6},{"v":4.8}]},{"c":[{"v":"toughness"},{"v":3.1},{"v":2.7},{"v":2.4},{"v":2.9}]},{"c":[{"v":"chillnes"},{"v":4.4},{"v":4.4},{"v":4.2},{"v":4.5}]},{"c":[{"v":"madness"},{"v":4.6},{"v":4.6},{"v":4},{"v":4.6}]},{"c":[{"v":"lochness"},{"v":3.9},{"v":3.7},{"v":2.9},{"v":3.9}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]}]}'; 
 
    var data = new google.visualization.DataTable(JSON.parse(jsonData)); 
 

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

 
    // listen for 'statechange' event on ControlWrapper 
 
    google.visualization.events.addListener(compPicker, 'statechange', function() { 
 
    // log selected values array 
 
    document.getElementById('message').innerHTML += JSON.stringify(compPicker.getState().selectedValues) + '<br/>'; 
 
    }); 
 

 

 
    var chart = new google.visualization.ChartWrapper({ 
 
    'chartType': 'ColumnChart', 
 
    'containerId': 'chart1', 
 
    'options': {'title':'Competenties', 
 
     'width':'100%', 
 
     'height':300, 
 
     'vAxis': { 
 
     viewWindow: {max:5,min:0}, 
 
     gridlines: {color:'#CCC', count: 6} 
 
     }, 
 
     bar: { groupWidth: '80%' }, 
 
     colors: ["#FFC000","#00b0f0","#ff0000","#92d050"] 
 
    } 
 
    }); 
 

 
    var table = new google.visualization.ChartWrapper({ 
 
    'chartType': 'Table', 
 
    'containerId': 'chart2', 
 
    'options': { 
 
     'width': '400px' 
 
    } 
 
    }); 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
    <table> 
 
    <tr style='vertical-align: top'> 
 
     <td> 
 
     <div id="control1"></div> 
 
     <div id="control2"></div> 
 
     <div id="control3"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div style="float: left;" id="chart1"></div> 
 
     <div style="float: left;" id="chart2"></div> 
 
     <div style="float: left;" id="chart3"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
<div id="message"></div>

来源

2016-03-07 14:27:17 WhiteHat

这个问题有什么好运？ – WhiteHat

谷歌图表，visulization controlle值

回答

相关问题