Google Chart未显示

我正在尝试创建一个function，当您从下拉列表中选择一个区域并为其请求降雨数据时，您将获得该数据的Google图表。
但是，它不起作用。
你能看看问题是什么吗？
对不起的代码提前抱歉。 我是JS的新手。 我已经对代码进行了评论，以帮助更好地理解它。
谢谢 ：）

这是小提琴 。

这是HTML –

 
 Select a region below to know the annual rainfall in that region. 
  
  Select a region Andaman & Nicobar Islands Arunachal Pradesh Assam, Meghalaya Bihar Chattisgarh Coastal Karnataka Coastal Andhra Pradesh East Rajasthan East Madhya Pradesh East Uttar Pradesh Gangetic West Bengal Gujarat Region, Dadra & Nagar Haveli Haryana, Delhi, Chandigarh Himachal Pradesh Jammu, Kashmir Jharkhand Kerala Kokan, Goa Lakshadweep Madhya Maharashtra Maratwada Nagaland, Manipur, Mizoram, Tripura North Interior Karnataka Orissa Punjab Rayalseema Saurashtra, Kutch, Diu South Interior Karnataka Sub-Himalayan, West Bengal, Sikkim Tamil Nadu, Pondicherry Telengana Uttaranchal Vidarbha West Madhya Pradesh West Rajasthan West Uttar Pradesh  
  
 Get data! 
  
  

这是JS –

 // Get region text var region = jQuery(".region").find(":selected").text(); //Create button variable var button = jQuery("button"); //Detect change in region selection and store the selected region in the variable jQuery(".region").change(function() { region = jQuery(".region").find(":selected").text(); }); //When the data is requested (button is pressed) button.click(function() { google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); //Drawing the chart function drawChart() { var query; //Tests to check which region is selected if (region == "Andaman & Nicobar Islands") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:B"); } else if (region == "Arunachal Pradesh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:C"); } else if (region == "Assam, Meghalaya") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:D"); } else if (region == "Bihar") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:E"); } else if (region == "Chattisgarh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:F"); } else if (region == "Coastal Karnataka") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:G"); } else if (region == "Coastal Andhra Pradesh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:H"); } else if (region == "East Rajasthan") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:I"); } else if (region == "East Madhya Pradesh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:J"); } else if (region == "East Uttar Pradesh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:K"); } else if (region == "Gangetic West Bengal") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:L"); } else if (region == "Gujarat Region, Dadra & Nagar Haveli") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:M"); } else if (region == "Haryana, Delhi, Chandigarh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:N"); } else if (region == "Himachal Pradesh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:O"); } else if (region == "Jammu, Kashmir") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:P"); } else if (region == "Jharkhand") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:Q"); } else if (region == "Kerala") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:R"); } else if (region == "Kokan, Goa") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:S"); } else if (region == "Lakshadweep") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:T"); } else if (region == "Madhya Maharashtra") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:U"); } else if (region == "Maratwada") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:V"); } else if (region == "Nagaland, Manipur, Mizoram, Tripura") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:W"); } else if (region == "North Interior Karnataka") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:X"); } else if (region == "Orissa") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:Y"); } else if (region == "Punjab") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:Z"); } else if (region == "Rayalseema") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AA"); } else if (region == "Saurashtra, Kutch, Diu") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AB"); } else if (region == "South Interior Karnataka") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AC"); } else if (region == "Sub-Himalayan, West Bengal, Sikkim") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AD"); } else if (region == "Tamil Nadu, Pondicherry") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AE"); } else if (region == "Telengana") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AF"); } else if (region == "Uttaranchal") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AG"); } else if (region == "Vidarbha") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AH"); } else if (region == "West Madhya Pradesh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AI"); } else if (region == "West Rajasthan") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AJ"); } else if (region == "West Uttar Pradesh") { query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&range=A:AK"); } query.send(handleQueryResponse); }; function handleQueryResponse(response) { var data = response.getDataTable(); var chartAreaHeight = data.getNumberOfRows() * 10; var chartHeight = chartAreaHeight + 70; var options = { annotations: { textStyle: { fontSize: 10 } }, legend: "none", vAxis: { title: "Year", format: "0" }, hAxis: { title: "Rainfall (in mm)" }, height: chartHeight, chartArea: { height: chartAreaHeight, top: "100", right: "100", bottom: "100", left: "100" } }; //Tests to check which region is selected if (region == "Andaman & Nicobar Islands") { options = { title = "Andaman & Nicobar Islands" } } else if (region == "Arunachal Pradesh") { options = { title = "Arunachal Pradesh" } } else if (region == "Assam, Meghalaya") { options = { title = "Assam, Meghalaya" } } else if (region == "Bihar") { options = { title = "Bihar" } } else if (region == "Chattisgarh") { options = { title = "Chattisgarh" } } else if (region == "Coastal Karnataka") { options = { title = "Coastal Karnataka" } } else if (region == "Coastal Andhra Pradesh") { options = { title = "Coastal Andhra Pradesh" } } else if (region == "East Rajasthan") { options = { title = "East Rajasthan" } } else if (region == "East Madhya Pradesh") { options = { title = "East Madhya Pradesh" } } else if (region == "East Uttar Pradesh") { options = { title = "East Uttar Pradesh" } } else if (region == "Gangetic West Bengal") { options = { title = "Gangetic West Bengal" } } else if (region == "Gujarat Region, Dadra & Nagar Haveli") { options = { title = "Gujarat Region, Dadra & Naga Haveli"; } } else if (region == "Haryana, Delhi, Chandigarh") { options = { title = "Haryana, Delhi, Chandigarh" } } else if (region == "Himachal Pradesh") { options = { title = "Himachal Pradesh" } } else if (region == "Jammu, Kashmir") { options = { title = "Jammu, Kashmir" } } else if (region == "Jharkhand") { options = { title = "Jharkhand" } } else if (region == "Kerala") { options = { title = "Kerala" } } else if (region == "Kokan, Goa") { options = { title = "Kokan, Goa" } } else if (region == "Lakshadweep") { options = { title = "Lakshadweep" } } else if (region == "Madhya Maharashtra") { options = { title = "Madhya Maharashtra" } } else if (region == "Maratwada") { options = { title = "Maratwada" } } else if (region == "Nagaland, Manipur, Mizoram, Tripura") { options = { title = "Nagaland, Manipur, Mizoram Tripura"; } } else if (region == "North Interior Karnataka") { options = { title = "orth Interior Karnataka" } } else if (region == "Orissa") { options = { title = "Orissa" } } else if (region == "Punjab") { options = { title = "Punjab" } } else if (region == "Rayalseema") { options = { title = "Rayalseema" } } else if (region == "Saurashtra, Kutch, Diu") { options = { title = "Saurashtra, Kutch, Diu" } } else if (region == "South Interior Karnataka") { options = { title = "South Interior Karnataka" } } else if (region == "Sub-Himalayan, West Bengal, Sikkim") { options = { title = "Sub-Himalayan, West Bengal Sikkim"; } } else if (region == "Tamil Nadu, Pondicherry") { options = { title = "Tamil Nadu, Pondicherry" } } else if (region == "Telengana") { options = { title = "Telengana" } } else if (region == "Uttaranchal") { options = { title = "Uttaranchal" } } else if (region == "Vidarbha") { options = { title = "Vidarbha" } } else if (region == "West Madhya Pradesh") { options = { title = "West Madhya Pradesh" } } else if (region == "West Rajasthan") { options = { title = "West Rajasthan" } } else if (region == "West Uttar Pradesh") { options = { title = "West Uttar Pradesh" } } var formatter = new google.visualization.NumberFormat({ pattern: '#,##0.0' }); formatter.format(data, 1); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }]); var chart = new google.visualization.BarChart(document.getElementById("chart")); chart.draw(view, options); window.addEventListener('resize', function() { chart.draw(view, options); }, false) }; }); 

Answer 1

做了一些改变……

1. google.load和setOnLoadCallback只应在每页加载时调用一次
2. 添加value属性到option以避免long if语句
3. 更改了query以使用tq=参数，该参数允许sql语句，并仅返回所需的列，而不是整个范围
4. 删除了“获取数据”按钮

编辑

5. 图表涵盖了下拉列表 – 由于css float: left; 在.region
   改为text-align: left;
6. 增加条形高度 – 使用图表选项bar.groupWidth
7. x轴的差值为1000 – 使用图表选项hAxis.ticks
   在数组中提供所需的标签
8. y轴显示所有年份，而不仅仅是中间的几个 – 与上面相同，但使用vAxis.ticks
9. 添加评论，让我知道……

看下面的工作片段……

 // load google charts, version '45'. 'current' version throws error when loading DataView google.charts.load('45', { // callback function when google finished loading 'callback': function() { jQuery(".region").change(drawChart); // removed 'drawChart()', appears you want a selection before drawing }, // packages used on this page 'packages': ['corechart'] }); function drawChart() { // get the selected option value var region = jQuery(".region").find(":selected").val(); // build query with select statement based on region value var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&tq=select A," + region); // run query query.send(handleQueryResponse); }; function handleQueryResponse(response) { // get data table var data = response.getDataTable(); // create number formatter var formatter = new google.visualization.NumberFormat({ pattern: '0' }); // format first column formatter.format(data, 0); // create number formatter var formatter = new google.visualization.NumberFormat({ pattern: '#,##0.0' }); // format second column formatter.format(data, 1); // set chart area height var chartAreaHeight = data.getNumberOfRows() * 12; // set chart height var chartHeight = chartAreaHeight + 70; // set x-axis labels or 'ticks' var xTicks = []; // find max amount for ticks var dataMax = google.visualization.data.group( data, // modifier column to find max on entire table [{column: 0, type: 'string', modifier: function () {return '';}}], // max column [{column: 1, type: 'number', aggregation: google.visualization.data.max}] ); // 'round up' to nearest 1000 var maxTick = Math.ceil(dataMax.getValue(0, 1) / 1000) * 1000; // load ticks array for (var i = 0; i <= maxTick; i = i + 1000) { xTicks.push(i); } // build y-axis ticks, add every year, need to reduce font or increase height var yTicks = []; for (var i = 0; i < data.getNumberOfRows(); i++) { yTicks.push(data.getValue(i, 0)); } // chart options var options = { animation: { startup: true, easing: 'linear', duration: 750 }, annotations: { textStyle: { fontSize: 7 } }, title: jQuery(".region").find(":selected").text(), legend: "none", vAxis: { title: "Year", format: "0" }, hAxis: { title: "Rainfall (in mm)" }, height: chartHeight, chartArea: { height: chartAreaHeight, // use number for exact, string for percentage "100%" top: 70, right: 100, bottom: 100, left: 100 }, // set bar height bar: { groupWidth: 7 }, // set x-axis ticks hAxis: { ticks: xTicks }, // set y-axis options vAxis: { // format for year format: '0', // text style, reduce font textStyle: { fontSize: 8 }, // tick marks ticks: yTicks } }; // create data view from data table var view = new google.visualization.DataView(data); // add calculated column for annotations, 'current' version bombs here view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }]); // create, draw chart var chart = new google.visualization.BarChart(document.getElementById("chart")); chart.draw(view, options); // re-draw chart when the window resizes // removed 'window.addEventListener' as may not work in older browsers $(window).resize(function() { chart.draw(view, options); }); }; 

 .text { margin-bottom: 10px; } .region { text-align: left; } button { text-align: left; margin-left: 10px; } #chart { width: 100%; } 

   
 Select a region below to know the annual rainfall in that region. 
 
   Please select a region... Andaman & Nicobar Islands Arunachal Pradesh Assam, Meghalaya Bihar Chattisgarh Coastal Karnataka Coastal Andhra Pradesh East Rajasthan East Madhya Pradesh East Uttar Pradesh Gangetic West Bengal Gujarat Region, Dadra & Nagar Haveli Haryana, Delhi, Chandigarh Himachal Pradesh Jammu, Kashmir Jharkhand Kerala Kokan, Goa Lakshadweep Madhya Maharashtra Maratwada Nagaland, Manipur, Mizoram, Tripura North Interior Karnataka Orissa Punjab Rayalseema Saurashtra, Kutch, Diu South Interior Karnataka Sub-Himalayan, West Bengal, Sikkim Tamil Nadu, Pondicherry Telengana Uttaranchal Vidarbha West Madhya Pradesh West Rajasthan West Uttar Pradesh  
 
  

Answer 2

试试这个

https://jsfiddle.net/15rdener/

这是javascript对象的错误格式

  options = { title = "East Madhya Pradesh" } 

你应该使用

 options = { title : "East Madhya Pradesh" }