Introduction détaillée au puissant graphique réactif JavaScript Chartist.js (image et texte)-js tutoriel-php.cn

Introduction détaillée au puissant graphique réactif JavaScript Chartist.js (image et texte)

黄舟

Libérer： 2017-03-15 17:31:27

original

5382 Les gens l'ont consulté

PuissantJavaScriptGraphique réactif Chartist.js

Chartist.js est un graphique frontal JavaScript très simple et pratiqueGénérateur, il prend en charge le format SVG, la conversion des données graphiques est très flexible et il prend également en charge une variété de formulaires de présentation de graphiques, ce qui en fait un outil de développement pour les développeurs front-end.

ChartistCaractéristiques du fichier .js

La configuration est très simple et peut facilement convertir différents formats de données graphiques.
CSS et JavaScript sont séparés, le code est donc relativement concis et relativement pratique à utiliser.
utilise le format SVG, de sorte que Chartist.js peut être appliqué de manière flexible sur les pages Web.
Graphiques réactifs, prenant en charge différentes tailles et résolutions de navigateur.
Prend en charge l'architecture SASS personnalisée.

Comment utiliser Chartist.js

Vous devez d'abord télécharger le package JS et le package CSS depuis son site officiel, et La page les références :

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

Copier après la connexion

Ci-dessous, nous donnons une brève introduction à certains types de graphiques couramment utilisés.

Graphique linéaire avec invite d'info-bulle

Rendu :

Code 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
  });
});

Copier après la connexion

Colonne multidimensionnelle graphique

Rendu :

Code 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
  }
});

Copier après la connexion

Graphique circulaire simple

Rendu :

Code 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);

Copier après la connexion

Pour plus d'informations sur l'utilisation de Chartist.js, vous pouvez vous rendre sur son site officiel pour plus de détails, y compris API .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!