하이 차트를 슬라이드하는 방법은 무엇입니까?

Question

시간이 지나면 마우스를 클릭하여 다른 차트를 표시하는 슬라이더를 만들고 싶습니다. (이미지 슬라이더와 비슷합니다.)

어떻게 하시겠습니까 ?? jQuery를 조금 알고 있지만 이것을 구현하는 방법을 모릅니다.

편집 :로드 이벤트에 setInterval을 방법을 실험하고

.

그러나 XML 파일에서 데이터를 가져 오면 코드가 작동하지 않습니다. 그러나 xml 파일 대신 명시 적 값을 넣으면 코드는 원하는대로 정확하게 작동합니다. 여기에 내 코드를 붙여 넣습니다.

$(document).ready(function($) { 

    makeChart('data1.xml'); 


    function makeChart(file) { 

     var options = { 

      chart: { 
       renderTo: 'container', 
       type: '', 
       events: { 
        load: function() { 

         // set up the updating of the chart each second        
         setInterval(function() { 

          makeChart('data2.xml'); 
         }, 1000); 
        } 
       } 
      }, 
      title: { 
       text: 'Fruit Consumption' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150 
      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080'}] 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %'; 
       } 
      }, 

      xAxis: { 
       categories: [] 
      }, 
      yAxis: { 
       title: { 
        text: 'Units' 
       } 
      }, 

      series: [] 

     }; 

     $.get(file, function(xml) { 

      // Split the lines 
      var $xml = $(xml); 

      options.chart.type = ($xml.find('type').text()); 

      // push categories 
      $xml.find('categories item').each(function(i, category) { 
       options.xAxis.categories.push($(category).text()); 
      }); 

      // push series 
      $xml.find('series').each(function(i, series) { 
       var seriesOptions = { 
        name: $(series).find('name').text(), 
        data: [] 
       }; 

       // push data points 
       $(series).find('data point').each(function(i, point) { 
        seriesOptions.data.push(
        parseInt($(point).text())); 
       }); 

       // add it to the options 
       options.series.push(seriesOptions); 
      }); 
      var chart = new Highcharts.Chart(options); 
     }); 

    } 
});​ 

Answer 1

나는에 대해 읽고하는 것이 좋습니다 : - 잠시 후

.click()을 슬라이드를 실행 -

setTimeout() 당신이 어떤 선택

animate()을 클릭하면 실행 이벤트 - 당신이 원하는 경우에 슬라이더가 유창하게 작동합니다.

css: left,right,top,bottom -이 속성을 변경할 수 있습니다. 요소의 슬라이더에 요소를 포함 - 당신이

css: position: relative, overflow:hidden 밀어 원하는 요소 - animate에서 백인 군대 슬라이드 효과

css: position: absolute를 확인합니다.

나는 이것이 당신에게 도움이 될 수 있다고 생각합니다. 또한 Google에서 더 많은 슬라이더 예제를 찾을 수 있습니다. 그냥 검색해.

행운을 빕니다)