Detailed introduction to the powerful JavaScript responsive chart Chartist.js (image and text)-JS Tutorial-php.cn

Detailed introduction to the powerful JavaScript responsive chart Chartist.js (image and text)

黄舟

Release： 2017-03-15 17:31:27

Original

5374 people have browsed it

PowerfulJavaScriptResponsive chart Chartist.js

Chartist.js is a very simple and practical JavaScript front-end chartGenerator, it supports SVG format, chart data conversion is very flexible, and it also supports a variety of chart presentation forms, making it a development tool for front-end developers.

Chartist.js Features

The configuration is very simple and can easily convert various chart data formats.
CSS and JavaScript are separated, so the code is relatively concise and relatively convenient to use.
Uses SVG format, so Chartist.js can be flexibly applied on Web pages.
Responsive chart, supports different browser sizes and resolutions.
Supports custom SASS architecture.

How to use Chartist.js

First you need to download the JS package and CSS package from its official website, and Quote them on the page:

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

Copy after login

Below we will give a brief introduction to some commonly used chart types.

Line chart with Tooltip prompt

Rendering:

##JavaScript code:

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

Copy after login

Multi-dimensional columns Shape chart

Rendering:

JavaScript code:

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

Copy after login

Simple pie chart

Rendering:

##JavaScript code:

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

Copy after login

For more information about the usage of Chartist.js, you can go to its official website to check, including detailed

API

The above is the detailed content of Detailed introduction to the powerful JavaScript responsive chart Chartist.js (image and text). For more information, please follow other related articles on the PHP Chinese website!