first commit
This commit is contained in:
43
WebRoot/node_modules/chart.js/docs/getting-started/README.md
generated
vendored
Normal file
43
WebRoot/node_modules/chart.js/docs/getting-started/README.md
generated
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
# Getting Started
|
||||
|
||||
Let's get started using Chart.js!
|
||||
|
||||
First, we need to have a canvas in our page.
|
||||
|
||||
```html
|
||||
<canvas id="myChart"></canvas>
|
||||
```
|
||||
|
||||
Now that we have a canvas we can use, we need to include Chart.js in our page.
|
||||
|
||||
```html
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
|
||||
```
|
||||
|
||||
Now, we can create a chart. We add a script to our page:
|
||||
|
||||
```javascript
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
var chart = new Chart(ctx, {
|
||||
// The type of chart we want to create
|
||||
type: 'line',
|
||||
|
||||
// The data for our dataset
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
data: [0, 10, 5, 2, 20, 30, 45],
|
||||
}]
|
||||
},
|
||||
|
||||
// Configuration options go here
|
||||
options: {}
|
||||
});
|
||||
```
|
||||
|
||||
It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
|
||||
|
||||
There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases).
|
||||
57
WebRoot/node_modules/chart.js/docs/getting-started/installation.md
generated
vendored
Normal file
57
WebRoot/node_modules/chart.js/docs/getting-started/installation.md
generated
vendored
Normal file
@ -0,0 +1,57 @@
|
||||
# Installation
|
||||
Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way.
|
||||
|
||||
## npm
|
||||
[](https://npmjs.com/package/chart.js)
|
||||
[](https://npmjs.com/package/chart.js)
|
||||
|
||||
```bash
|
||||
npm install chart.js --save
|
||||
```
|
||||
|
||||
## Bower
|
||||
[](https://libraries.io/bower/chartjs)
|
||||
|
||||
```bash
|
||||
bower install chart.js --save
|
||||
```
|
||||
|
||||
## CDN
|
||||
### CDNJS
|
||||
[](https://cdnjs.com/libraries/Chart.js)
|
||||
|
||||
Chart.js built files are available on [CDNJS](https://cdnjs.com/):
|
||||
|
||||
https://cdnjs.com/libraries/Chart.js
|
||||
|
||||
### jsDelivr
|
||||
[](https://cdn.jsdelivr.net/npm/chart.js@latest/dist/) [](https://www.jsdelivr.com/package/npm/chart.js)
|
||||
|
||||
Chart.js built files are also available through [jsDelivr](http://www.jsdelivr.com/):
|
||||
|
||||
https://www.jsdelivr.com/package/npm/chart.js?path=dist
|
||||
|
||||
## Github
|
||||
[](https://github.com/chartjs/Chart.js/releases/latest)
|
||||
|
||||
You can download the latest version of [Chart.js on GitHub](https://github.com/chartjs/Chart.js/releases/latest).
|
||||
|
||||
If you download or clone the repository, you must [build](../developers/contributing.md#building-and-testing) Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is **strongly** advised.
|
||||
|
||||
# Selecting the Correct Build
|
||||
|
||||
Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
|
||||
|
||||
## Stand-Alone Build
|
||||
Files:
|
||||
* `dist/Chart.js`
|
||||
* `dist/Chart.min.js`
|
||||
|
||||
The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include [Moment.js](http://momentjs.com/) before Chart.js for the functionality of the time axis.
|
||||
|
||||
## Bundled Build
|
||||
Files:
|
||||
* `dist/Chart.bundle.js`
|
||||
* `dist/Chart.bundle.min.js`
|
||||
|
||||
The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.
|
||||
36
WebRoot/node_modules/chart.js/docs/getting-started/integration.md
generated
vendored
Normal file
36
WebRoot/node_modules/chart.js/docs/getting-started/integration.md
generated
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
# Integration
|
||||
|
||||
Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.
|
||||
|
||||
## ES6 Modules
|
||||
|
||||
```javascript
|
||||
import Chart from 'chart.js';
|
||||
var myChart = new Chart(ctx, {...});
|
||||
```
|
||||
|
||||
## Script Tag
|
||||
|
||||
```html
|
||||
<script src="path/to/chartjs/dist/Chart.js"></script>
|
||||
<script>
|
||||
var myChart = new Chart(ctx, {...});
|
||||
</script>
|
||||
```
|
||||
|
||||
## Common JS
|
||||
|
||||
```javascript
|
||||
var Chart = require('chart.js');
|
||||
var myChart = new Chart(ctx, {...});
|
||||
```
|
||||
|
||||
## Require JS
|
||||
|
||||
```javascript
|
||||
require(['path/to/chartjs/dist/Chart.js'], function(Chart){
|
||||
var myChart = new Chart(ctx, {...});
|
||||
});
|
||||
```
|
||||
|
||||
> **Important:** RequireJS [can **not** load CommonJS module as is](http://www.requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
|
||||
65
WebRoot/node_modules/chart.js/docs/getting-started/usage.md
generated
vendored
Normal file
65
WebRoot/node_modules/chart.js/docs/getting-started/usage.md
generated
vendored
Normal file
@ -0,0 +1,65 @@
|
||||
# Usage
|
||||
Chart.js can be used with ES6 modules, plain JavaScript and module loaders.
|
||||
|
||||
## Creating a Chart
|
||||
|
||||
To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example.
|
||||
|
||||
```html
|
||||
<canvas id="myChart" width="400" height="400"></canvas>
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Any of the following formats may be used
|
||||
var ctx = document.getElementById("myChart");
|
||||
var ctx = document.getElementById("myChart").getContext("2d");
|
||||
var ctx = $("#myChart");
|
||||
var ctx = "myChart";
|
||||
```
|
||||
|
||||
Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!
|
||||
|
||||
The following example instantiates a bar chart showing the number of votes for different colors and the y-axis starting at 0.
|
||||
|
||||
```html
|
||||
<canvas id="myChart" width="400" height="400"></canvas>
|
||||
<script>
|
||||
var ctx = document.getElementById("myChart");
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 206, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255,99,132,1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
'rgba(153, 102, 255, 1)',
|
||||
'rgba(255, 159, 64, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user