강력 한 자 바스 크 립 트 응답 식 도표 Chartist.js 사용

4442 단어 Chartist.js
Chartist.js 는 매우 간단 하고 실 용적 인 JavaScript 전단 도표 생 성기 로 SVG 형식 을 지원 하 며 도표 데이터 변환 이 매우 유연 하 며 다양한 도표 표현 형식 도 지원 하 며 전단 개발 자의 개발 이기 도 합 니 다.
Chartist.js 의 특징
4.567917.설정 이 매우 간단 하여 각종 도표 데이터 형식 을 편리 하 게 전환 할 수 있 습 니 다
  • CSS 와 JavaScript 가 분리 되 어 있 기 때문에 코드 가 간결 하고 사용 하기에 상대 적 으로 편리 합 니 다
  • SVG 형식 을 사용 하기 때문에 Chartist.js 는 웹 페이지 에 유연 하 게 응용 할 수 있 습 니 다
  • 4.567917.응답 식 도표 로 서로 다른 브 라 우 저 크기 와 해상 도 를 지원 합 니 다사용자 정의 SASS 구 조 를 지원 합 니 다
    Chartist.js 사용법
    우선 공식 사이트 에서 JS 패키지 와 CSS 패 키 지 를 다운로드 하고 페이지 에서 참조 해 야 합 니 다.
    
    <link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css" rel="external nofollow" >
    <script src="bower_components/chartist/dist/chartist.min.js">
    다음은 우리 가 자주 사용 하 는 도표 유형 에 대해 간단 한 소 개 를 하 겠 다.
    Tooltip 알림 이 있 는 선형 그림
    효과 그림:

    JavaScript 코드:
    
    new Chartist.Line('.ct-chart', {
     labels: ['1', '2', '3', '4', '5', '6'],
     series: [
      {
       name: 'Fibonacci sequence',
       data: [1, 2, 3, 5, 8, 13]
      },
      {
       name: 'Golden section',
       data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
      }
     ]
    });
    
    var easeOutQuad = function (x, t, b, c, d) {
     return -c * (t /= d) * (t - 2) + b;
    };
    
    var $chart = $('.ct-chart');
    
    var $toolTip = $chart
     .append('<div class="tooltip"></div>')
     .find('.tooltip')
     .hide();
    
    $chart.on('mouseenter', '.ct-point', function() {
     var $point = $(this),
      value = $point.attr('ct:value'),
      seriesName = $point.parent().attr('ct:series-name');
    
     $point.animate({'stroke-width': '50px'}, 300, easeOutQuad);
     $toolTip.html(seriesName + '<br>' + value).show();
    });
    
    $chart.on('mouseleave', '.ct-point', function() {
     var $point = $(this);
    
     $point.animate({'stroke-width': '20px'}, 300, easeOutQuad);
     $toolTip.hide();
    });
    
    $chart.on('mousemove', function(event) {
     $toolTip.css({
      left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
      top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
     });
    });
    
    
    다 차원 기둥 그림
    효과 그림:

    JavaScript 코드:
    
    new Chartist.Bar('.ct-chart', {
     labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
     series: [
      [60000, 40000, 80000, 70000],
      [40000, 30000, 70000, 65000],
      [8000, 3000, 10000, 6000]
     ]
    }, {
     seriesBarDistance: 10,
     axisX: {
      offset: 60
     },
     axisY: {
      offset: 80,
      labelInterpolationFnc: function(value) {
       return value + ' CHF'
      },
      scaleMinSpace: 15
     }
    });
    
    간단 한 떡 그림
    효과 그림:
     
    JavaScript 코드:
    
    var data = {
     labels: ['Bananas', 'Apples', 'Grapes'],
     series: [20, 15, 40]
    };
    
    var options = {
     labelInterpolationFnc: function(value) {
      return value[0]
     }
    };
    
    var responsiveOptions = [
     ['screen and (min-width: 640px)', {
      chartPadding: 30,
      labelOffset: 100,
      labelDirection: 'explode',
      labelInterpolationFnc: function(value) {
       return value;
      }
     }],
     ['screen and (min-width: 1024px)', {
      labelOffset: 80,
      chartPadding: 20
     }]
    ];
    
    new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
    
    
    Chartist.js 의 용법 에 대해 서 는 공식 홈 페이지 를 방문 하여 자세히 API 를 포함 하여 찾 아 볼 수 있 습 니 다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기