스크롤시 Highchart 애니메이션로드

사용자 3492795

여러 하이 차트를 개발했으며 사용자가 아래로 스크롤하고 그래프 컨테이너가 표시 될 때 애니메이션을 시작하고 싶습니다.

다음은 내 작업의 바이올린입니다. http://jsfiddle.net/LWmn5/

JS :

$(function () {
    $('#container1').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: false,
                alpha: 0
            }
        },

        colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
        title: {
            text: ''
        },tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 140,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['43.6%', 43.6],
                ['22.5%', 22.5],
                ['17.9%', 17.9],
                ['5.1%', 5.1],
                ['10.8%', 10.8]
            ]
        }]
    });
});

$(function () { 
    $('#container3').highcharts({

                                legend: {
            enabled: false
        },
        chart: {
            type: 'column',
            margin: 25,
            options3d: {
                enabled: true,
                alpha: 20,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: ''
        },

        plotOptions: {
            column: {
                depth: 45,
                 colorByPoint: true
            }
        },
            colors: [
                '#081969',
                'grey',
                '#30509b'
            ],
        xAxis: {
            categories: ['21.56Mbps Melita', '19.47Mbps EU Average', '7.93Mbps GO'],
            labels: {
                enabled: true
            },
            gridLineWidth: 0,
                minorGridLineWidth: 0,
        },
        yAxis: {
            title: {
                text: null
            },
            opposite: true,
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
                minorGridLineWidth: 0,
        },
        series: [{
            name: '',
            data: [4, 3, 2]
        }]
    });
});

도움을 주신 분들께 감사드립니다!

에산 사자 드

다음 플러그인 중 하나를 사용해야합니다.

http://scrollrevealjs.org/

http://mynameismatthieu.com/WOW/docs.html

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

스크롤시 SVG 애니메이션

분류에서Dev

가로 스크롤 시스템에 슬라이드 애니메이션 추가

분류에서Dev

스크롤시 표시되는 jQuery 애니메이션

분류에서Dev

스크롤시 Jquery 텍스트 애니메이션

분류에서Dev

스크롤시 애니메이션 스킬 바

분류에서Dev

CSS 애니메이션 후 앵커로 스크롤 하시겠습니까?

분류에서Dev

위로 스크롤시 스크롤 애니메이션이 작동하지 않음

분류에서Dev

jquery : 스크롤시 이미지 애니메이션

분류에서Dev

스크롤 가능한 DIV, 페이지로드시 div 하단으로 스크롤되는 애니메이션을 만들고 싶습니다.

분류에서Dev

애니메이션을 사용하여 div로 jQuery 부드러운 스크롤

분류에서Dev

시차 애니메이션 스크롤 효과

분류에서Dev

애니메이션 후 기본 시작 스크롤 반응

분류에서Dev

GSAP를 사용하여 스크롤시 SVG 애니메이션

분류에서Dev

jquery 스크롤시 배경색 애니메이션 (여러 div)

분류에서Dev

스크롤시 여백 상단 변경 (애니메이션)

분류에서Dev

Objective-c : 스크롤시 UITableViewCell 애니메이션

분류에서Dev

스크롤시 차트 애니메이션 트리거

분류에서Dev

브라우저 스크롤시 애니메이션

분류에서Dev

jQuery의 스크롤 애니메이션

분류에서Dev

페이지로드시 Chrome 애니메이션 링크

분류에서Dev

애니메이션 div로 웹 페이지 자동 스크롤

분류에서Dev

<a>를 <label> Jquery 애니메이션 스크롤로 바꿉니다.

분류에서Dev

스크롤 기반 애니메이션 : 만드는 방법

분류에서Dev

크로스 페이드 애니메이션

분류에서Dev

크로스 페이드 애니메이션

분류에서Dev

애니메이션으로 ScrollViewer를 스크롤하는 방법

분류에서Dev

Google 차트로 LineChart 애니메이션 스크롤

분류에서Dev

특정 위치로 jQuery 스크롤 애니메이션

분류에서Dev

HTML 파일의 위치로 스크롤-애니메이션 스크롤 사용

Related 관련 기사

  1. 1

    스크롤시 SVG 애니메이션

  2. 2

    가로 스크롤 시스템에 슬라이드 애니메이션 추가

  3. 3

    스크롤시 표시되는 jQuery 애니메이션

  4. 4

    스크롤시 Jquery 텍스트 애니메이션

  5. 5

    스크롤시 애니메이션 스킬 바

  6. 6

    CSS 애니메이션 후 앵커로 스크롤 하시겠습니까?

  7. 7

    위로 스크롤시 스크롤 애니메이션이 작동하지 않음

  8. 8

    jquery : 스크롤시 이미지 애니메이션

  9. 9

    스크롤 가능한 DIV, 페이지로드시 div 하단으로 스크롤되는 애니메이션을 만들고 싶습니다.

  10. 10

    애니메이션을 사용하여 div로 jQuery 부드러운 스크롤

  11. 11

    시차 애니메이션 스크롤 효과

  12. 12

    애니메이션 후 기본 시작 스크롤 반응

  13. 13

    GSAP를 사용하여 스크롤시 SVG 애니메이션

  14. 14

    jquery 스크롤시 배경색 애니메이션 (여러 div)

  15. 15

    스크롤시 여백 상단 변경 (애니메이션)

  16. 16

    Objective-c : 스크롤시 UITableViewCell 애니메이션

  17. 17

    스크롤시 차트 애니메이션 트리거

  18. 18

    브라우저 스크롤시 애니메이션

  19. 19

    jQuery의 스크롤 애니메이션

  20. 20

    페이지로드시 Chrome 애니메이션 링크

  21. 21

    애니메이션 div로 웹 페이지 자동 스크롤

  22. 22

    <a>를 <label> Jquery 애니메이션 스크롤로 바꿉니다.

  23. 23

    스크롤 기반 애니메이션 : 만드는 방법

  24. 24

    크로스 페이드 애니메이션

  25. 25

    크로스 페이드 애니메이션

  26. 26

    애니메이션으로 ScrollViewer를 스크롤하는 방법

  27. 27

    Google 차트로 LineChart 애니메이션 스크롤

  28. 28

    특정 위치로 jQuery 스크롤 애니메이션

  29. 29

    HTML 파일의 위치로 스크롤-애니메이션 스크롤 사용

뜨겁다태그

보관