강력한 JavaScript 반응형 차트 Chartist.js에 대한 자세한 소개(이미지 및 텍스트)-JS 튜토리얼-php.cn

강력한 JavaScript 반응형 차트 Chartist.js에 대한 자세한 소개(이미지 및 텍스트)

黄舟

풀어 주다： 2017-03-15 17:31:27

원래의

5339명이 탐색했습니다.

강력한JavaScript반응형 차트 Chartist.js

Chartist.js는 매우 간단하고 실용적인 JavaScript 프런트 엔드 차트입니다Generator는 SVG 형식을 지원하고 차트 데이터 변환이 매우 유연하며 다양한 차트 표현 형식도 지원하므로 프런트엔드 개발자를 위한 개발 도구입니다.

Chartist.js 기능

구성이 매우 간단하고 다양한 차트 데이터 형식을 쉽게 변환할 수 있습니다.
CSS와 JavaScript가 분리되어 있어 코드가 비교적 간결하고 사용하기가 비교적 편리합니다.
은 SVG 형식을 사용하므로 Chartist.js를 웹페이지에 유연하게 적용할 수 있습니다.
다양한 브라우저 크기와 해상도를 지원하는 반응형 차트.
맞춤형 SASS 아키텍처를 지원합니다.

Chartist.js 사용 방법

먼저 공식 홈페이지에서 JS 패키지와 CSS 패키지를 다운로드하고, 참조 페이지:

<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css">
<script src="bower_components/chartist/dist/chartist.min.js">

로그인 후 복사

아래에서는 일반적으로 사용되는 일부 차트 유형에 대해 간략하게 소개합니다.

도구 설명 프롬프트가 포함된 꺾은선형 차트

렌더링:

JavaScript 코드:

new Chartist.Line(&#39;.ct-chart&#39;, {
  labels: [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;],
  series: [
    {
      name: &#39;Fibonacci sequence&#39;,
      data: [1, 2, 3, 5, 8, 13]
    },
    {
      name: &#39;Golden section&#39;,
      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 = $(&#39;.ct-chart&#39;);

var $toolTip = $chart
  .append(&#39;<p class="tooltip"></p>&#39;)
  .find(&#39;.tooltip&#39;)
  .hide();

$chart.on(&#39;mouseenter&#39;, &#39;.ct-point&#39;, function() {
  var $point = $(this),
    value = $point.attr(&#39;ct:value&#39;),
    seriesName = $point.parent().attr(&#39;ct:series-name&#39;);

  $point.animate({&#39;stroke-width&#39;: &#39;50px&#39;}, 300, easeOutQuad);
  $toolTip.html(seriesName + &#39;<br>&#39; + value).show();
});

$chart.on(&#39;mouseleave&#39;, &#39;.ct-point&#39;, function() {
  var $point = $(this);

  $point.animate({&#39;stroke-width&#39;: &#39;20px&#39;}, 300, easeOutQuad);
  $toolTip.hide();
});

$chart.on(&#39;mousemove&#39;, 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(&#39;.ct-chart&#39;, {
  labels: [&#39;First quarter of the year&#39;, &#39;Second quarter of the year&#39;, &#39;Third quarter of the year&#39;, &#39;Fourth quarter of the year&#39;],
  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 + &#39; CHF&#39;
    },
    scaleMinSpace: 15
  }
});

로그인 후 복사

간단한 원형 차트

렌더링:

JavaScript 코드:

var data = {
  labels: [&#39;Bananas&#39;, &#39;Apples&#39;, &#39;Grapes&#39;],
  series: [20, 15, 40]
};

var options = {
  labelInterpolationFnc: function(value) {
    return value[0]
  }
};

var responsiveOptions = [
  [&#39;screen and (min-width: 640px)&#39;, {
    chartPadding: 30,
    labelOffset: 100,
    labelDirection: &#39;explode&#39;,
    labelInterpolationFnc: function(value) {
      return value;
    }
  }],
  [&#39;screen and (min-width: 1024px)&#39;, {
    labelOffset: 80,
    chartPadding: 20
  }]
];

new Chartist.Pie(&#39;.ct-chart&#39;, data, options, responsiveOptions);

로그인 후 복사

Chartist.js의 사용법에 대한 자세한 내용은 자세한 API를 포함한 공식 웹사이트에서 확인할 수 있습니다.

위 내용은 강력한 JavaScript 반응형 차트 Chartist.js에 대한 자세한 소개(이미지 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!