Google 차트 번호 범위 필터가 아코디언과 제대로 작동하지 않습니다.

Google 차트 범위 필터는 아코디언 외부에서 완벽하게 작동합니다. 기본 범위 슬라이더는 가장 왼쪽과 가장 오른쪽에 설정됩니다. 예 : http://jsfiddle.net/samsumi007/1v5xyqL9/Google 차트 번호 범위 필터가 아코디언과 제대로 작동하지 않습니다.

그러나 아코디언 안에이 Google 차트를 넣으면 슬라이더가 엉망이됩니다. 예를 들어 : http://jsfiddle.net/samsumi007/k1cvd05m/

<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>

내가 이렇게 행동 왜 확실하지 않다 (2 절 확인). 올바른 데이터를 표시하더라도 왼쪽 및 오른쪽 슬라이더는 '0'으로 설정되어 사용자가 그래프를 읽는 것이 이해가되지 않습니다.

출처

2014-09-25 samsumi

음, 아코디언이 디스플레이를 숨겨서 컨트롤 상태를 설정하려고 할 때 사용할 수있는 너비가 0이라고 생각합니다 (상태가 실제로 8이기 때문에 데이터가 올바르게 표시됨).

1) 차트 섹션을 처음 클릭 한 후에 >> >> 조금 어려운 상태에 대해 올바른 너비와 왼쪽 스타일 속성을 설정합니다 (또는 섹션 뒤에 차트를 그려야합니다.)

<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/

를 차트가 렌더링을 완료 한 후에 만 2

2) 아코디언 확인)를 클릭하고있다

출처

2014-09-26 18:24:23 juvian

Google 차트 번호 범위 필터가 아코디언과 제대로 작동하지 않습니다.

답변

관련 문제