強力な JavaScript 応答チャート Chartist.js の詳細な紹介 (画像とテキスト)-jsチュートリアル-php.cn

強力な JavaScript 応答チャート Chartist.js の詳細な紹介 (画像とテキスト)

黄舟

リリース： 2017-03-15 17:31:27

オリジナル

5330 人が閲覧しました

強力なJavaScriptレスポンシブチャート Chartist.js

Chartist.jsは、非常にシンプルで実用的なJavaScriptフロントエンドチャートジェネレーターで、チャートデータ変換は非常に柔軟で、Aもサポートしています。多彩なチャート表示形式を備え、フロントエンド開発者向けの開発ツールと言えます。

Chartist.jsの特徴

構成は非常にシンプルで、様々なチャートデータ形式を簡単に変換できます。
CSSとJavaScriptが分離されているのでコードが比較的シンプルで比較的使いやすいです。
SVG形式を使用しているため、Chartist.jsはWebページに柔軟に適用できます。
レスポンシブなグラフは、さまざまなブラウザーのサイズと解像度をサポートします。
カスタム SASS アーキテクチャをサポートします。

Chartist.jsの使い方

まず、公式Webサイトから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 を含む公式 Web サイトを確認してください。

以上が強力な JavaScript 応答チャート Chartist.js の詳細な紹介 (画像とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。