Powerful JavaScript response chart CHARTIST.JS

Chartist.js is a very simple and practical JavaScript front-end chart generator, which supports SVG format, chart data conversion is very flexible, and also supports a variety of chart display, which is not a front-end developer’s development weapon.

Chartist.js Characteristics

The configuration is very simple, and it can easily convert various chart data formats.
    CSS and JavaScript are separated, so the code is relatively simple, and it is relatively convenient.
  • Using the SVG format, CHARTIST.JS can be applied very flexible on the web page.
  • Responsive chart, supports different browser size and resolution.
  • Supports custom SASS architectures.
  • CHARTIST.JS method

First you need to download JS packages and CSS packages in its official website And references them in the page: 强大的JavaScript响应式图表Chartist.js的使用

We are commonly used The chart type makes a simple introduction.
     
JavaScript code:

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 (‘

‘) .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 + ‘+ Value) .show ();}); $ Chart.on (‘ mouseeleave ‘,’ .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响应式图表Chartist.js的使用 Multi-dimensional column

rendering:
  
JavaScript code:

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, 1000, 6000]]}, {seriesbardistance: 10, axisx: {offset: 60}, axisy: {offset: 80, labelinterpolationfnc: function (value) {return value + 'chf'}, scaleminspace: 15}});

Simple pie chart

Rendering:

强大的JavaScript响应式图表Chartist.js的使用

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);
  More about chartist.js, can go to its official website for consultation, including detailed API.  
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment