项目作者: rte-antares-rpackage

项目描述 :
minicharts : easily add mini animated charts
高级语言: JavaScript
项目地址: git://github.com/rte-antares-rpackage/minicharts.git
创建时间: 2017-02-09T16:03:10Z
项目社区:https://github.com/rte-antares-rpackage/minicharts

开源协议:Other

下载


NPM

Travis Build Status
Appveyor Build Status
codecov

minicharts.js: easily add mini animated charts

minicharts.js is a javascript library to add easily compact animated charts in an html page. This can be especially usefull when you want to include many similar charts in a limited space like a table, a map or a complex chart.

The full documentation is available here.
You can also test the library on JsFiddle.

Usage

First include the script in your html pages:

  1. <script src="https://unpkg.com/minicharts@0.1.1/dist/minicharts.min.js"></script>

This adds a global object called minicharts. Alternatively you can install the library with npm and use it with:

  1. var minicharts = require(minicharts);

Next add to your html an element that will contain the chart and that can be easily selected with a CSS selector. For instance:

  1. <span id="mychart"></span>

In your javascript, create the desired chart:

  1. var mychart = new minicharts.Barchart("#mychart", [1, 2, 3]);

Customize your charts

For now three chart types are available: Barchart, Piechart and Polarchart. Their constructor take the same parameters:

  • A CSS selector
  • An array containing values to represent
  • An optional object containing graphical options for your chart like width, height, colors, etc.

Here is an example:

  1. var opts = {
  2. colors: ["#2B303A", "#92DCE5", "#EEE5E9"],
  3. width:100,
  4. labels: "auto",
  5. maxValue: 3 // Important if you want to compare charts
  6. };
  7. var mychart = new minicharts.Polarchart("#mychart", [1, 2, 3], opts);

Update a chart

Charts object have methods setData and setOptions to update respectively data and graphical options. Here is the code use to generate the example at the top of the document:

  1. var opts = {
  2. width:360,
  3. height:120,
  4. labels: "auto",
  5. maxValue: 100
  6. };
  7. function fakeData(n) {
  8. var res = [];
  9. for (var i = 0; i < n; i++) res.push(Math.random() * 100);
  10. return res;
  11. }
  12. var mychart = new minicharts.Barchart("#mychart", fakeData(6), opts);
  13. setInterval(function(){mychart.setData(fakeData(6))}, 1000);

Contributing:

Contributions to the library are welcome and can be submitted in the form of pull requests to this repository.

License Information:

Copyright 2015-2016 RTE (France)

This Source Code is subject to the terms of the GNU General Public License, version 2 or any higher version. If a copy of the GPL-v2 was not distributed with this file, You can obtain one at https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html.

The minicharts library includes code of other open-source libraries (full copies of the license agreements used by these components are in the LICENCE file):