谷歌圖表數字範圍過濾器無法正常使用手風琴

Google圖表範圍過濾器在手風琴之外完美無瑕。默認範圍滑塊設置在最左側和最右側。例如：http://jsfiddle.net/samsumi007/1v5xyqL9/谷歌圖表數字範圍過濾器無法正常使用手風琴

但是，當我把這個google圖表放在手風琴裏面時，滑塊會搞砸了。例如：http://jsfiddle.net/samsumi007/k1cvd05m/（檢查第2節）

<html> 

<head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     // Load the Visualization API and the controls package. 
     google.load('visualization', '1.0', { 
      'packages': ['controls'] 
     }); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawDashboard); 

     // Callback that creates and populates a data table, 
     // instantiates a dashboard, a range slider and a pie chart, 
     // passes in the data and draws it. 
     function drawDashboard() { 

      // Create our data table. 
      var data = google.visualization.arrayToDataTable([ 
       ['Name', 'Donuts eaten'], 
       ['Michael', 5], 
       ['Elisa', 7], 
       ['Robert', 3], 
       ['John', 2], 
       ['Jessica', 6], 
       ['Aaron', 1], 
       ['Margareth', 8] 
      ]); 

      // Create a dashboard. 
      var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div')); 

      // Create a range slider, passing some options 
      var donutRangeSlider = new google.visualization.ControlWrapper({ 
       'controlType': 'NumberRangeFilter', 
        'containerId': 'filter_div', 
        'options': { 
        'filterColumnLabel': 'Donuts eaten' 
       } 
      }); 

      // Create a pie chart, passing some options 
      var pieChart = new google.visualization.ChartWrapper({ 
       'chartType': 'PieChart', 
        'containerId': 'chart_div', 
        'options': { 
        'width': 600, 
         'height': 600, 
         'pieSliceText': 'value', 
         'legend': 'right' 
       } 
      }); 

      // Establish dependencies, declaring that 'filter' drives 'pieChart', 
      // so that the pie chart will only display entries that are let through 
      // given the chosen slider range. 
      dashboard.bind(donutRangeSlider, pieChart); 

      // Draw the dashboard. 
      dashboard.draw(data); 
     } 
    </script> 
    <script> 
     $(function() { 
      $("#accordion").accordion({ 
       autoHeight: false, 
       active: false, 
       alwaysOpen: false, 
       fillspace: false, 
       collapsible: true, 
       navigation: true, 
       heightStyle: "content" //auto, fill, conten 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <div id="accordion"> 
     <h3>Section 1</h3> 

     <div></div> 
     <h3>Section 2</h3> 

     <div id="dashboard_div" style='height:900px;'> 
      <!--Divs that will hold each control and chart--> 
      <div id="filter_div"></div> 
      <div id="chart_div"></div> 
     </div> 
    </div> 
</body>

我不知道爲什麼它的表現是這樣的。即使它顯示正確的數據，左側和右側滑塊也被設置爲'0'，這對用戶閱讀圖形沒有意義。

來源

2014-09-25 samsumi

嗯，問題在於你的手風琴將顯示屏隱藏起來，所以當它試圖設置控件的狀態時，它認爲可用的寬度是0（因爲狀態是在8中進行的，所以你看到的數據是正確的）。只能想到修復它的兩種方法：

1）在第一次點擊圖表部分後，爲狀態設置正確的寬度和左側樣式屬性>>有點難（或者只是在截面後面繪製圖表2已被點擊）

2）使手風琴圖表呈現完畢後，才：

<script> 
var firstTimeLoaded=true; 
//your code... 

if (firstTime) { // if its the first time it draws, add the accordion 
        google.visualization.events.addListener(dashboard, 'ready', function() { 
         $("#accordion").accordion({ 
          autoHeight: false, 
          active: false, 
          alwaysOpen: false, 
          fillspace: false, 
          collapsible: true, 
          navigation: true, 
          heightStyle: "content" //auto, fill, conten 
         }); 
         google.visualization.events.removeAllListeners(dashboard) // remove listener 
        }) 
       } 
dashboard.draw(data);

工作小提琴：http://jsfiddle.net/k1cvd05m/1/

來源

2014-09-26 18:24:23 juvian

谷歌圖表數字範圍過濾器無法正常使用手風琴

回答

相關問題