68 lines
25 KiB
HTML
68 lines
25 KiB
HTML
<!doctype html><!--[if lt IE 7]>
|
|
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
|
|
<html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
|
|
<html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Chartist - Plugins</title><meta name="description" content="Use plugins to extend the functionality of your charts"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="styles/vendor.css"><link rel="stylesheet" href="styles/main.css"><section class="page-content plugins"><div class="contain-to-grid sticky"><nav class="top-bar" data-topbar data-options="sticky_on: large"><ul class="title-area"><li class="name"><h1><a href="index.html">Chartist.js</a></h1><li class="toggle-topbar menu-icon"><a href="#">Menu</a></ul><section class="top-bar-section"><ul class="right"><li><a href="//github.com/gionkunz/chartist-js/tree/master/dist" target="_blank">Download</a></ul><ul class="left"><li><a href="getting-started.html">Getting started</a><li><a href="api-documentation.html">API Documentation</a><li><a href="examples.html">Examples</a><li><a href="plugins.html">Plugins</a><li><a href="//github.com/gionkunz/chartist-js" target="_blank">Contribute</a></ul></section></nav></div><article class="main" role="main"><header><h2>Chartist - Plugins</h2></header><aside class="side-navigation"><nav><ul class="side-nav"><li class="heading">Overview<li><a class="text-clipping" href="#whats-a-plugin">What's a plugin?</a><li><a class="text-clipping" href="#how-to-use-plugins">How to use plugins</a><li class="heading">Available plugins<li><a class="text-clipping" href="#accessibility-plugin">Accessibility Plugin</a><li><a class="text-clipping" href="#tooltip-plugin">Tooltip Plugin</a><li><a class="text-clipping" href="#point-label-plugin">Point Label Plugin</a><li><a class="text-clipping" href="#axis-title-plugin">Axis Title Plugin</a><li><a class="text-clipping" href="#threshold-plugin">Threshold Plugin</a><li><a class="text-clipping" href="#filldonut-plugin">FillDonut Plugin</a><li><a class="text-clipping" href="#zoom-plugin">Zoom Plugin</a><li><a class="text-clipping" href="#target-line-plugin">Target Line Plugin</a><li class="heading">Develop a plugin<li><a class="text-clipping" href="#example-plugin">Example Plugin</a></ul></nav></aside><div class="content"><section class="documentation-section full"><header><h3 id="overview">Overview</h3></header><div class="content"><div class="sub-section"><h4 id="whats-a-plugin">What's a plugin?</h4><p>Plugins allow you to extend the basic functionality of your charts. You can develop your own plugins or use plugins that others have already developed.</div><div class="sub-section"><h4 id="how-to-use-plugins">How to use plugins</h4><p>Once you have included a plugin in your project you can use it in your chart by specifying it explicitly in the plugins section of your chart configuration. Check the <a href="#available-plugins">List of plugins</a> section to see what plugins you can use.<pre id="plugin-include"><code class="js">var chart = new Chartist.Line('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5, 6, 7],
|
|
series: [
|
|
[1, 5, 3, 4, 6, 2, 3],
|
|
[2, 4, 2, 5, 4, 3, 6]
|
|
]
|
|
}, {
|
|
plugins: [
|
|
ctPointLabels({
|
|
textAnchor: 'middle'
|
|
})
|
|
]
|
|
});
|
|
</code></pre><div class="hint"><div class="title">Order of specification</div><div class="content">Plugins are chainable and the order of specification in the plugins array of your configuration is important for the end result.</div></div><p>Chartist.js expects an array of plugin functions to be present in the <code>plugins</code> array of the chart configuration. Usually plugins should be written as function factories so you can pass additional parameters and options to the factory which is creating the plugin function and returns it.</div></div></section><section class="documentation-section full"><header><h3 id="available-plugins">Available plugins</h3></header><div class="content"><p>Here you can find a list of known plugins. Usually plugins should be available from both Bower and NPM for installation. If you have developed your own plugin but can't find it here, you should create a <a href="https://github.com/gionkunz/chartist-js/blob/develop/site/data/pages/examples.yml" target="_blank">pull request for this page</a> and add your plugin to the list.<div class="sub-section"><h4 id="accessibility-plugin">Accessibility Plugin</h4><p>285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision. We should stop the discrimination against our fellow human and, by fairly little effort and following best practices, make our content on the web accessible.<p>The accessibility plugin makes your chart accessible for blind people. It automatically generates visually hidden accessibility tables that allow you to describe your chart for blind people easily. This plugin was tested with NVDA and JAWS, and provides all necessary things for building an accessible chart.<p>By simply including this plugin with default configurations you will already make your charts accessible to blind people! If you put in 5 minutes effort in customizing the configuration with meaningful content, you will actually even make them enjoy your charts!<section class="live-example" id="example-plugin-accessibility" data-live-example="bmV3IENoYXJ0aXN0LkxpbmUoJy5jdC1jaGFydCcsIHsKICBsYWJlbHM6IFsnSmFudWFyeScsICdGZWJydWFyeScsICdNYXJjaCcsICdBcHJpbCcsICdNYXknLCAnSnVuZScsICdKdWx5JywgJ0F1Z3VzdCcsICdTZXB0ZW1iZXInLCAnT2N0b2JlcicsICdOb3ZlbWJlcicsICdEZWNlbWJlciddLAogIHNlcmllczogWwogICAge25hbWU6ICdJbmNvbWUnLCBkYXRhOiBbMjAwMDAsIDMwMDAwLCAzNTAwMCwgMzIwMDAsIDQwMDAwLCA0MjAwMCwgNTAwMDAsIDYyMDAwLCA4MDAwMCwgOTQwMDAsIDEwMDAwMCwgMTIwMDAwXX0sCiAgICB7bmFtZTogJ0V4cGVuc2VzJywgZGF0YTogWzEwMDAwLCAxNTAwMCwgMTIwMDAsIDE0MDAwLCAyMDAwMCwgMjMwMDAsIDIyMDAwLCAyNDAwMCwgMjEwMDAsIDE4MDAwLCAzMDAwMCwgMzIwMDBdfQogIF0KfSwgewogIGZ1bGxXaWR0aDogdHJ1ZSwKICBsaW5lU21vb3RoOiBmYWxzZSwKICBjaGFydFBhZGRpbmc6IHsKICAgIHJpZ2h0OiAyMCwKICAgIGxlZnQ6IDEwCiAgfSwKICBheGlzWDogewogICAgbGFiZWxJbnRlcnBvbGF0aW9uRm5jOiBmdW5jdGlvbih2YWx1ZSkgewogICAgICByZXR1cm4gdmFsdWUuc3BsaXQoJycpLnNsaWNlKDAsIDMpLmpvaW4oJycpOwogICAgfQogIH0sCiAgcGx1Z2luczogWwogICAgQ2hhcnRpc3QucGx1Z2lucy5jdEFjY2Vzc2liaWxpdHkoewogICAgICBjYXB0aW9uOiAnRmlzY2FsIHllYXIgMjAxNScsCiAgICAgIHNlcmllc0hlYWRlcjogJ2J1c2luZXNzIG51bWJlcnMnLAogICAgICBzdW1tYXJ5OiAnQSBncmFwaGljIHRoYXQgc2hvd3MgdGhlIGJ1c2luZXNzIG51bWJlcnMgb2YgdGhlIGZpc2NhbCB5ZWFyIDIwMTUnLAogICAgICB2YWx1ZVRyYW5zZm9ybTogZnVuY3Rpb24odmFsdWUpIHsKICAgICAgICByZXR1cm4gdmFsdWUgKyAnIGRvbGxhcic7CiAgICAgIH0sCiAgICAgIC8vIE9OTFkgVVNFIFRISVMgSUYgWU9VIFdBTlQgVE8gTUFLRSBZT1VSIEFDQ0VTU0lCSUxJVFkgVEFCTEUgQUxTTyBWSVNJQkxFIQogICAgICB2aXN1YWxseUhpZGRlblN0eWxlczogJ3Bvc2l0aW9uOiBhYnNvbHV0ZTsgdG9wOiAxMDAlOyB3aWR0aDogMTAwJTsgZm9udC1zaXplOiAxMXB4OyBvdmVyZmxvdy14OiBhdXRvOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuMSk7IHBhZGRpbmc6IDEwcHgnCiAgICB9KQogIF0KfSk7CgovLyBUaGlzIGlzIG9ubHkgdXNlZCBmb3IgdGhlIGV4YW1wbGUgb24gdGhlIENoYXJ0aXN0IGV4YW1wbGUgcGFnZQokY2hhcnQucGFyZW50KCkuY3NzKHsKICAnbWFyZ2luLWJvdHRvbSc6ICcxNjBweCcKfSk7Cg=="><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">Creating an accessible chart that shows some fiscal year figures. This example overrides the visuallyHiddenStyles configuration property so you can actually see the "invisible" table.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Gion Kunz<tr><td><strong>Link:</strong><td><a href="https://github.com/gionkunz/chartist-plugin-accessibility" target="_blank">chartist-plugin-accessibility</a></table></div><div class="sub-section"><h4 id="tooltip-plugin">Tooltip Plugin</h4><p>The tooltip plugin makes it super simple to add tooltips to most of your charts which can often increase it's usability.<p>By simply including this plugin with default configurations you will already make your charts get some tooltips showing.<section class="live-example" id="example-plugin-tooltip" data-live-example="dmFyIGNoYXJ0ID0gbmV3IENoYXJ0aXN0LkxpbmUoJy5jdC1jaGFydCcsIHsKICBsYWJlbHM6IFsxLCAyLCAzXSwKICBzZXJpZXM6IFsKICAgIFsKICAgICAge21ldGE6ICdkZXNjcmlwdGlvbicsIHZhbHVlOiAxIH0sCiAgICAgIHttZXRhOiAnZGVzY3JpcHRpb24nLCB2YWx1ZTogNX0sCiAgICAgIHttZXRhOiAnZGVzY3JpcHRpb24nLCB2YWx1ZTogM30KICAgIF0sCiAgICBbCiAgICAgIHttZXRhOiAnb3RoZXIgZGVzY3JpcHRpb24nLCB2YWx1ZTogMn0sCiAgICAgIHttZXRhOiAnb3RoZXIgZGVzY3JpcHRpb24nLCB2YWx1ZTogNH0sCiAgICAgIHttZXRhOiAnb3RoZXIgZGVzY3JpcHRpb24nLCB2YWx1ZTogMn0KICAgIF0KICBdCn0sIHsKICBsb3c6IDAsCiAgaGlnaDogOCwKICBmdWxsV2lkdGg6IHRydWUsCiAgcGx1Z2luczogWwogICAgQ2hhcnRpc3QucGx1Z2lucy50b29sdGlwKCkKICBdCn0pOwo="><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">Creating a simple line chart showing how the tooltips work.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Markus Padourek<tr><td><strong>Link:</strong><td><a href="https://github.com/Globegitter/chartist-plugin-tooltip" target="_blank">chartist-plugin-tooltip</a></table></div><div class="sub-section"><h4 id="point-label-plugin">Point Label Plugin</h4><p>The point label plugin can be used if you like to add simple labels on top of your data points on line charts. This is usefull if you'd like the user to see the exact values of the data without any additional interaction.<section class="live-example" id="example-plugin-pointlabel" data-live-example="bmV3IENoYXJ0aXN0LkxpbmUoJy5jdC1jaGFydCcsIHsKICBsYWJlbHM6IFsnTScsICdUJywgJ1cnLCAnVCcsICdGJ10sCiAgc2VyaWVzOiBbCiAgICBbMTIsIDksIDcsIDgsIDVdCiAgXQp9LCB7CiAgcGx1Z2luczogWwogICAgQ2hhcnRpc3QucGx1Z2lucy5jdFBvaW50TGFiZWxzKHsKICAgICAgdGV4dEFuY2hvcjogJ21pZGRsZScKICAgIH0pCiAgXQp9KTsK"><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">The point label plugin draws labels on top of your line chart points.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Gion Kunz<tr><td><strong>Link:</strong><td><a href="https://github.com/gionkunz/chartist-plugin-pointlabels" target="_blank">chartist-plugin-pointlabels</a></table></div><div class="sub-section"><h4 id="axis-title-plugin">Axis Title Plugin</h4><p>The axis title plugin allows you to add simple titles to your axes.<section class="live-example" id="example-plugin-axistitle" data-live-example="bmV3IENoYXJ0aXN0LkxpbmUoJy5jdC1jaGFydCcsIHsKICBsYWJlbHM6IFsnMC0xNScsICcxNi0zMCcsICczMS00NScsICc0Ni02MCcsICc2MS03NScsICc3Ni05MCcsICc5MS0xMDUnLCAnMTA2LTEyMCddLAogIHNlcmllczogW1sxLCAzLCA3LCAxMiwgMSwgMiwgMSwgMF1dCn0sIHsKICBjaGFydFBhZGRpbmc6IHsKICAgIHRvcDogMjAsCiAgICByaWdodDogMCwKICAgIGJvdHRvbTogMzAsCiAgICBsZWZ0OiAwCiAgfSwKICBheGlzWTogewogICAgb25seUludGVnZXI6IHRydWUKICB9LAogIHBsdWdpbnM6IFsKICAgIENoYXJ0aXN0LnBsdWdpbnMuY3RBeGlzVGl0bGUoewogICAgICBheGlzWDogewogICAgICAgIGF4aXNUaXRsZTogJ1RpbWUgKG1pbnMpJywKICAgICAgICBheGlzQ2xhc3M6ICdjdC1heGlzLXRpdGxlJywKICAgICAgICBvZmZzZXQ6IHsKICAgICAgICAgIHg6IDAsCiAgICAgICAgICB5OiA1MAogICAgICAgIH0sCiAgICAgICAgdGV4dEFuY2hvcjogJ21pZGRsZScKICAgICAgfSwKICAgICAgYXhpc1k6IHsKICAgICAgICBheGlzVGl0bGU6ICdHb2FscycsCiAgICAgICAgYXhpc0NsYXNzOiAnY3QtYXhpcy10aXRsZScsCiAgICAgICAgb2Zmc2V0OiB7CiAgICAgICAgICB4OiAwLAogICAgICAgICAgeTogMAogICAgICAgIH0sCiAgICAgICAgdGV4dEFuY2hvcjogJ21pZGRsZScsCiAgICAgICAgZmxpcFRpdGxlOiBmYWxzZQogICAgICB9CiAgICB9KQogIF0KfSk7Cg=="><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">While not a core functionality, this plugin makes it absolutely easy to add axis titles to your chart.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Alex Stanbury<tr><td><strong>Link:</strong><td><a href="https://github.com/alexstanbury/chartist-plugin-axistitle" target="_blank">chartist-plugin-axistitle</a></table></div><div class="sub-section"><h4 id="threshold-plugin">Threshold Plugin</h4><p>This Chartist plugin can be used to divide your Line or Bar chart with a threshold.<section class="live-example" id="example-plugin-threshold" data-live-example="bmV3IENoYXJ0aXN0LkxpbmUoJy5jdC1jaGFydCcsIHsKICBsYWJlbHM6IFsnSmFuJywgJ0ZlYicsICdNYXInLCAnQXByJywgJ01haScsICdKdW4nLCAnSnVsJywgJ0F1ZycsICdTZXAnLCAnT2N0JywgJ05vdicsICdEZWMnXSwKICBzZXJpZXM6IFsKICAgIFs1LCAtNCwgMywgNywgMjAsIDEwLCAzLCA0LCA4LCAtMTAsIDYsIC04XQogIF0KfSwgewogIHNob3dBcmVhOiB0cnVlLAogIGF4aXNZOiB7CiAgICBvbmx5SW50ZWdlcjogdHJ1ZQogIH0sCiAgcGx1Z2luczogWwogICAgQ2hhcnRpc3QucGx1Z2lucy5jdFRocmVzaG9sZCh7CiAgICAgIHRocmVzaG9sZDogNAogICAgfSkKICBdCn0pOwo="><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">Everything above and below the threshold will be tagged with a special class, in order for your to apply different styling where appropriate.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Gion Kunz<tr><td><strong>Link:</strong><td><a href="https://github.com/gionkunz/chartist-plugin-threshold" target="_blank">chartist-plugin-threshold</a></table></div><div class="sub-section"><h4 id="filldonut-plugin">FillDonut Plugin</h4><p>Let animated donuts look filled and provide options for append labels and html to the donut chart. This plugin draw the donut a second time but without delay and animation, so it animation will overlaps and looks like the fill the donut. Also your a possible to add multiple html-labels to the donut on different positions.<section class="live-example" id="example-plugin-fill-donut" data-live-example="dmFyIGNoYXJ0ID0gbmV3IENoYXJ0aXN0LlBpZSgnLmN0LWNoYXJ0JywgCiAgICB7CiAgICAgICAgc2VyaWVzOiBbMTYwLCA2MCBdLAogICAgICAgIGxhYmVsczogWycnLCAnJ10KICAgIH0sIHsKICAgICAgICBkb251dDogdHJ1ZSwKICAgICAgICBkb251dFdpZHRoOiAyMCwKICAgICAgICBzdGFydEFuZ2xlOiAyMTAsCiAgICAgICAgdG90YWw6IDI2MCwKICAgICAgICBzaG93TGFiZWw6IGZhbHNlLAogICAgICAgIHBsdWdpbnM6IFsKICAgICAgICAgICAgQ2hhcnRpc3QucGx1Z2lucy5maWxsRG9udXQoewogICAgICAgICAgICAgICAgaXRlbXM6IFt7CiAgICAgICAgICAgICAgICAgICAgY29udGVudDogJzxpIGNsYXNzPSJmYSBmYS10YWNob21ldGVyIj48L2k+JywKICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogJ2JvdHRvbScsCiAgICAgICAgICAgICAgICAgICAgb2Zmc2V0WSA6IDEwLAogICAgICAgICAgICAgICAgICAgIG9mZnNldFg6IC0yCiAgICAgICAgICAgICAgICB9LCB7CiAgICAgICAgICAgICAgICAgICAgY29udGVudDogJzxoMz4xNjA8c3BhbiBjbGFzcz0ic21hbGwiPm1waDwvc3Bhbj48L2gzPicKICAgICAgICAgICAgICAgIH1dCiAgICAgICAgICAgIH0pCiAgICAgICAgXSwKICAgIH0pOwoKY2hhcnQub24oJ2RyYXcnLCBmdW5jdGlvbihkYXRhKSB7CiAgICBpZihkYXRhLnR5cGUgPT09ICdzbGljZScgJiYgZGF0YS5pbmRleCA9PSAwKSB7CiAgICAgICAgLy8gR2V0IHRoZSB0b3RhbCBwYXRoIGxlbmd0aCBpbiBvcmRlciB0byB1c2UgZm9yIGRhc2ggYXJyYXkgYW5pbWF0aW9uCiAgICAgICAgdmFyIHBhdGhMZW5ndGggPSBkYXRhLmVsZW1lbnQuX25vZGUuZ2V0VG90YWxMZW5ndGgoKTsKCiAgICAgICAgLy8gU2V0IGEgZGFzaGFycmF5IHRoYXQgbWF0Y2hlcyB0aGUgcGF0aCBsZW5ndGggYXMgcHJlcmVxdWlzaXRlIHRvIGFuaW1hdGUgZGFzaG9mZnNldAogICAgICAgIGRhdGEuZWxlbWVudC5hdHRyKHsKICAgICAgICAgICAgJ3N0cm9rZS1kYXNoYXJyYXknOiBwYXRoTGVuZ3RoICsgJ3B4ICcgKyBwYXRoTGVuZ3RoICsgJ3B4JwogICAgICAgIH0pOwoKICAgICAgICAvLyBDcmVhdGUgYW5pbWF0aW9uIGRlZmluaXRpb24gd2hpbGUgYWxzbyBhc3NpZ25pbmcgYW4gSUQgdG8gdGhlIGFuaW1hdGlvbiBmb3IgbGF0ZXIgc3luYyB1c2FnZQogICAgICAgIHZhciBhbmltYXRpb25EZWZpbml0aW9uID0gewogICAgICAgICAgICAnc3Ryb2tlLWRhc2hvZmZzZXQnOiB7CiAgICAgICAgICAgICAgICBpZDogJ2FuaW0nICsgZGF0YS5pbmRleCwKICAgICAgICAgICAgICAgIGR1cjogMTIwMCwKICAgICAgICAgICAgICAgIGZyb206IC1wYXRoTGVuZ3RoICsgJ3B4JywKICAgICAgICAgICAgICAgIHRvOiAgJzBweCcsCiAgICAgICAgICAgICAgICBlYXNpbmc6IENoYXJ0aXN0LlN2Zy5FYXNpbmcuZWFzZU91dFF1aW50LAogICAgICAgICAgICAgICAgZmlsbDogJ2ZyZWV6ZScKICAgICAgICAgICAgfQogICAgICAgIH07CgogICAgICAgIC8vIFdlIG5lZWQgdG8gc2V0IGFuIGluaXRpYWwgdmFsdWUgYmVmb3JlIHRoZSBhbmltYXRpb24gc3RhcnRzIGFzIHdlIGFyZSBub3QgaW4gZ3VpZGVkIG1vZGUgd2hpY2ggd291bGQgZG8gdGhhdCBmb3IgdXMKICAgICAgICBkYXRhLmVsZW1lbnQuYXR0cih7CiAgICAgICAgICAgICdzdHJva2UtZGFzaG9mZnNldCc6IC1wYXRoTGVuZ3RoICsgJ3B4JwogICAgICAgIH0pOwoKICAgICAgICAvLyBXZSBjYW4ndCB1c2UgZ3VpZGVkIG1vZGUgYXMgdGhlIGFuaW1hdGlvbnMgbmVlZCB0byByZWx5IG9uIHNldHRpbmcgYmVnaW4gbWFudWFsbHkKICAgICAgICAvLyBTZWUgaHR0cDovL2dpb25rdW56LmdpdGh1Yi5pby9jaGFydGlzdC1qcy9hcGktZG9jdW1lbnRhdGlvbi5odG1sI2NoYXJ0aXN0c3ZnLWZ1bmN0aW9uLWFuaW1hdGUKICAgICAgICBkYXRhLmVsZW1lbnQuYW5pbWF0ZShhbmltYXRpb25EZWZpbml0aW9uLCB0cnVlKTsKICAgIH0KfSk7Cg=="><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">Let animated donuts look filled and provide options for append labels and html to the donut chart.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Moxx<tr><td><strong>Link:</strong><td><a href="https://github.com/moxx/chartist-plugin-fill-donut" target="_blank">chartist-plugin-fill-donut</a></table></div><div class="sub-section"><h4 id="zoom-plugin">Zoom Plugin</h4><p>The zoom plugin allows you to zoom into charts.<section class="live-example" id="example-plugin-zoom" data-live-example="dmFyIGRhdGEgPSB7CiAgc2VyaWVzOiBbWwogICAgeyB4OiAxLCB5OiAxMDAgfSwKICAgIHsgeDogMiwgeTogNTAgfSwKICAgIHsgeDogMywgeTogMjUgfSwKICAgIHsgeDogNCwgeTogNjYgfSwKICAgIHsgeDogNSwgeTogMzAgfSwKICAgIHsgeDogNiwgeTogMjIgfQogIF1dCn07Cgp2YXIgb3B0aW9ucyA9IHsKICBheGlzWDogewogICAgdHlwZTogQ2hhcnRpc3QuQXV0b1NjYWxlQXhpcwogIH0sCiAgYXhpc1k6IHsKICAgIHR5cGU6IENoYXJ0aXN0LkF1dG9TY2FsZUF4aXMKICB9LAogIHBsdWdpbnM6IFsKICAgIENoYXJ0aXN0LnBsdWdpbnMuem9vbSh7IG9uWm9vbTogb25ab29tIH0pCiAgXQp9OwoKdmFyIGNoYXJ0ID0gQ2hhcnRpc3QuTGluZSgnLmN0LWNoYXJ0JywgZGF0YSwgb3B0aW9ucyk7CnZhciByZXNldEZuYzsKZnVuY3Rpb24gb25ab29tKGNoYXJ0LCByZXNldCkgewogIHJlc2V0Rm5jID0gcmVzZXQ7Cn0KCnZhciBidG4gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdidXR0b24nKTsKYnRuLmlkID0gJ3Jlc2V0LXpvb20tYnRuJzsKYnRuLmlubmVySFRNTCA9ICdSZXNldCBab29tJzsKYnRuLnN0eWxlLmZsb2F0ID0gJ3JpZ2h0JzsKYnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24oKSB7CiAgY29uc29sZS5sb2cocmVzZXRGbmMpOwogIHJlc2V0Rm5jICYmIHJlc2V0Rm5jKCk7Cn0pOwp2YXIgcGFyZW50ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2V4YW1wbGUtcGx1Z2luLXpvb20gLmNoYXJ0Jyk7CiFwYXJlbnQucXVlcnlTZWxlY3RvcignI3Jlc2V0LXpvb20tYnRuJykgJiYgcGFyZW50LmFwcGVuZENoaWxkKGJ0bik7Cg=="><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">Use the left mouse button to drag a zoom box. The plugin provides a callback that can be used to reset the zoom.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Hannes Kamecke<tr><td><strong>Link:</strong><td><a href="https://github.com/hansmaad/chartist-plugin-zoom" target="_blank">chartist-plugin-zoom</a></table></div><div class="sub-section"><h4 id="target-line-plugin">Target Line Plugin</h4><p>The target line plugin allows you to draw a target line on your chart.<section class="live-example" id="example-plugin-targetline" data-live-example="bmV3IENoYXJ0aXN0LkxpbmUoJy5jdC1jaGFydCcsIHsKICBsYWJlbHM6IFsnTScsICdUJywgJ1cnLCAnVCcsICdGJ10sCiAgc2VyaWVzOiBbCiAgICBbNSwgMTEsIDIsIDUsIDddCiAgXQp9LCB7CiAgcGx1Z2luczogWwogICAgQ2hhcnRpc3QucGx1Z2lucy5jdFRhcmdldExpbmUoewogICAgICB2YWx1ZTogNgogICAgfSkKICBdCn0pOwo="><div class="chart"><div class="ct-chart ct-golden-section"></div></div><aside class="live-code"><div class="introduction"><p class="text">Pass a value to the plugin to draw a target line on the chart.</p><button class="edit-button">Edit Example</button></div><div class="editor-area"><textarea class="code-editor"></textarea><button class="close-edit-button">Close Editor</button></div></aside></section><table id="" role="presentation"><tr><td><strong>Author:</strong><td>Harry Twyford<tr><td><strong>Link:</strong><td><a href="https://github.com/htwyford/chartist-plugin-targetline" target="_blank">chartist-plugin-targetline</a></table></div></div></section><section class="documentation-section full"><header><h3 id="develop-a-plugin">Develop a plugin</h3></header><div class="content"><p>Plugins are functions that will be called for each chart that is created with the plugin enabled (specified in the <code>plugins</code> configuration of a chart). The plugin function will be called with one argument which is the chart that is registering itself for the plugin. If you wish to use some additional parameters or configuration for your plugin initialization, it's recommended to use a function factory. You can check the example plugin for an implementation using a function factory.<pre id="plugin-signature"><code class="js">function myChartistPlugin(chart) {
|
|
|
|
}
|
|
</code></pre><p>From the chart object <code>options</code>, <code>svg</code> (root SVG element) and the <code>eventEmitter</code> can be used to manipulate the behaviour of the chart. It's the responsibility of the plugin to decide if it should be activated on a given chart (i.e. by checking the chart type <code>chart instanceof Chartist.Line</code> etc.).<p>It's recommended to use the events of Chartist.js (like <code>draw</code>) to manipulate the underlying elements. Using the events, plugins can chain up in a natural way and work independently on extending the functionality of the chart.<p>Plugins should contain their own default settings and use <code>Chartist.extend</code> to override the settings specified in the options passed to the plugin factory function. Using the <code>optionsProvider</code> of the chart object one could also implement functioanlity based on the chart configuration as well as responsive configuration.<div class="sub-section"><h4 id="example-plugin">Example Plugin</h4><p>The following code shows an example plugin that is also available for download and installation. You can also use the <a href="https://github.com/gionkunz/chartist-plugin-pointlabels" target="_blank">repository of the example plugin</a> to start your own awesome Chartist.js plugin.</div><pre id="plugin-example"><code class="js">function ctPointLabels(options) {
|
|
return function ctPointLabels(chart) {
|
|
var defaultOptions = {
|
|
labelClass: 'ct-label',
|
|
labelOffset: {
|
|
x: 0,
|
|
y: -10
|
|
},
|
|
textAnchor: 'middle'
|
|
};
|
|
|
|
options = Chartist.extend({}, defaultOptions, options);
|
|
|
|
if(chart instanceof Chartist.Line) {
|
|
chart.on('draw', function(data) {
|
|
if(data.type === 'point') {
|
|
data.group.elem('text', {
|
|
x: data.x + options.labelOffset.x,
|
|
y: data.y + options.labelOffset.y,
|
|
style: 'text-anchor: ' + options.textAnchor
|
|
}, options.labelClass).text(data.value);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</code></pre></div></section></div></article></section><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-53685926-1', 'auto');
|
|
ga('require', 'displayfeatures');
|
|
ga('send', 'pageview');</script><script async src="scripts/all.js"></script><!-- Take web fonts off the critical path but risk FOUT --><script type="text/javascript">WebFontConfig = {
|
|
google: { families: ['Oxygen:400,300,700', 'Source+Code+Pro:400,700'] },
|
|
custom: {
|
|
families: [ 'FontAwesome' ],
|
|
urls: [ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css']
|
|
}
|
|
};
|
|
(function() {
|
|
var wf = document.createElement('script');
|
|
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
|
|
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
|
|
wf.type = 'text/javascript';
|
|
wf.async = 'true';
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(wf, s);
|
|
})();</script> |