xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
dashixiong
2026-01-16 14:13:44 +08:00
commit 903ff8d495
34603 changed files with 8585054 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
WebRoot/node_modules/chart.js/docs/charts/README.md generated vendored Normal file
View File

@ -0,0 +1,13 @@
# Charts
Chart.js comes with built-in chart types:
* [line](./line.md)
* [bar](./bar.md)
* [radar](./radar.md)
* [polar area](./polar.md)
* [doughnut and pie](./doughnut.md)
* [bubble](./bubble.md)
[Area charts](area.md) can be built from a line or radar chart using the dataset `fill` option.
To create a new chart type, see the [developer notes](../developers/charts.md#new-charts)

72
WebRoot/node_modules/chart.js/docs/charts/area.md generated vendored Normal file
View File

@ -0,0 +1,72 @@
# Area Charts
Both [line](line.md) and [radar](radar.md) charts support a `fill` option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale `origin`, `start` or `end` (see [filling modes](#filling-modes)).
> **Note:** this feature is implemented by the [`filler` plugin](https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler.js).
## Filling modes
| Mode | Type | Values |
| :--- | :--- | :--- |
| Absolute dataset index <sup>1</sup> | `Number` | `1`, `2`, `3`, ... |
| Relative dataset index <sup>1</sup> | `String` | `'-1'`, `'-2'`, `'+1'`, ... |
| Boundary <sup>2</sup> | `String` | `'start'`, `'end'`, `'origin'` |
| Disabled <sup>3</sup> | `Boolean` | `false` |
> <sup>1</sup> dataset filling modes have been introduced in version 2.6.0<br>
> <sup>2</sup> prior version 2.6.0, boundary values was `'zero'`, `'top'`, `'bottom'` (deprecated)<br>
> <sup>3</sup> for backward compatibility, `fill: true` (default) is equivalent to `fill: 'origin'`<br>
**Example**
```javascript
new Chart(ctx, {
data: {
datasets: [
{fill: 'origin'}, // 0: fill to 'origin'
{fill: '+2'}, // 1: fill to dataset 3
{fill: 1}, // 2: fill to dataset 1
{fill: false}, // 3: no fill
{fill: '-2'} // 4: fill to dataset 2
]
}
})
```
## Configuration
| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| [`plugins.filler.propagate`](#propagate) | `Boolean` | `true` | Fill propagation when target is hidden
### propagate
Boolean (default: `true`)
If `true`, the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets:
**Example**
```javascript
new Chart(ctx, {
data: {
datasets: [
{fill: 'origin'}, // 0: fill to 'origin'
{fill: '-1'}, // 1: fill to dataset 0
{fill: 1}, // 2: fill to dataset 1
{fill: false}, // 3: no fill
{fill: '-2'} // 4: fill to dataset 2
]
},
options: {
plugins: {
filler: {
propagate: true
}
}
}
})
```
`propagate: true`:
- if dataset 2 is hidden, dataset 4 will fill to dataset 1
- if dataset 2 and 1 are hidden, dataset 4 will fill to `'origin'`
`propagate: false`:
- if dataset 2 and/or 4 are hidden, dataset 4 will not be filled

246
WebRoot/node_modules/chart.js/docs/charts/bar.md generated vendored Normal file
View File

@ -0,0 +1,246 @@
# Bar
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
{% chartjs %}
{
"type": "bar",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(201, 203, 207, 0.2)"
],
"borderColor": [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}
{% endchartjs %}
## Example Usage
```javascript
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
```
## Dataset Properties
The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bars is generally set this way.
Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.
| Name | Type | Description
| ---- | ---- | -----------
| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
| `yAxisID` | `String` | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
| `backgroundColor` | `Color/Color[]` | The fill color of the bar. See [Colors](../general/colors.md#colors)
| `borderColor` | `Color/Color[]` | The color of the bar border. See [Colors](../general/colors.md#colors)
| `borderWidth` | `Number/Number[]` | The stroke width of the bar in pixels.
| `borderSkipped` | `String` | Which edge to skip drawing the border for. [more...](#borderskipped)
| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the bars when hovered.
| `hoverBorderColor` | `Color/Color[]` | The stroke colour of the bars when hovered.
| `hoverBorderWidth` | `Number/Number[]` | The stroke width of the bars when hovered.
### borderSkipped
This setting is used to avoid drawing the bar stroke at the base of the fill. In general, this does not need to be changed except when creating chart types that derive from a bar chart.
Options are:
* 'bottom'
* 'left'
* 'top'
* 'right'
## Configuration Options
The bar chart defines the following configuration options. These options are merged with the global chart configuration options, `Chart.defaults.global`, to form the options passed to the chart.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
| `barThickness` | `Number` | | Manually set width of each bar in pixels. If not set, the base sample widths are calculated automatically so that they take the full available widths without overlap. Then, the bars are sized using `barPercentage` and `categoryPercentage`.
| `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this.
| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
### offsetGridLines
If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a bar chart while false for other charts by default.
This setting applies to the axis configuration. If axes are added to the chart, this setting will need to be set for each new axis.
```javascript
options = {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
}
}]
}
}
```
## Default Options
It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in `Chart.defaults.bar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
## barPercentage vs categoryPercentage
The following shows the relationship between the bar percentage option and the category percentage option.
```text
// categoryPercentage: 1.0
// barPercentage: 1.0
Bar: | 1.0 | 1.0 |
Category: | 1.0 |
Sample: |===========|
// categoryPercentage: 1.0
// barPercentage: 0.5
Bar: |.5| |.5|
Category: | 1.0 |
Sample: |==============|
// categoryPercentage: 0.5
// barPercentage: 1.0
Bar: |1.||1.|
Category: | .5 |
Sample: |==============|
```
## Data Structure
The `data` property of a dataset for a bar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
```javascript
data: [20, 10]
```
You can also specify the dataset as x/y coordinates when using the [time scale](../axes/cartesian/time.md#time-cartesian-axis).
```javascript
data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]
```
# Stacked Bar Chart
Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
```javascript
var stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
```
## Dataset Properties
The following dataset properties are specific to stacked bar charts.
| Name | Type | Description
| ---- | ---- | -----------
| `stack` | `String` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack)
# Horizontal Bar Chart
A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
{% chartjs %}
{
"type": "horizontalBar",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 205, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(201, 203, 207, 0.2)"
],
"borderColor": [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"xAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}
{% endchartjs %}
## Example
```javascript
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
```
## Config Options
The configuration options for the horizontal bar chart are the same as for the [bar chart](#configuration-options). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.

109
WebRoot/node_modules/chart.js/docs/charts/bubble.md generated vendored Normal file
View File

@ -0,0 +1,109 @@
# Bubble Chart
A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
{% chartjs %}
{
"type": "bubble",
"data": {
"datasets": [{
"label": "First Dataset",
"data": [{
"x": 20,
"y": 30,
"r": 15
}, {
"x": 40,
"y": 10,
"r": 10
}],
"backgroundColor": "rgb(255, 99, 132)"
}]
},
}
{% endchartjs %}
## Example Usage
```javascript
// For a bubble chart
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: options
});
```
## Dataset Properties
The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
| [`borderWidth`](#styling) | `Number` | Yes | Yes | `3`
| [`data`](#data-structure) | `Object[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `1`
| [`hoverRadius`](#interactions) | `Number` | Yes | Yes | `4`
| [`hitRadius`](#interactions) | `Number` | Yes | Yes | `1`
| [`label`](#labeling) | `String` | - | - | `undefined`
| [`pointStyle`](#styling) | `String` | Yes | Yes | `circle`
| [`radius`](#styling) | `Number` | Yes | Yes | `3`
### Labeling
`label` defines the text associated to the dataset and which appears in the legend and tooltips.
### Styling
The style of each bubble can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | bubble background color
| `borderColor` | bubble border color
| `borderWidth` | bubble border width (in pixels)
| `pointStyle` | bubble [shape style](../configuration/elements#point-styles)
| `radius` | bubble radius (in pixels)
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
### Interactions
The interaction with each bubble can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `hoverBackgroundColor` | bubble background color when hovered
| `hoverBorderColor` | bubble border color hovered
| `hoverBorderWidth` | bubble border width when hovered (in pixels)
| `hoverRadius` | bubble **additional** radius when hovered (in pixels)
| `hitRadius` | bubble **additional** radius for hit detection (in pixels)
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
## Default Options
We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at `Chart.defaults.bubble`.
## Data Structure
Bubble chart datasets need to contain a `data` array of points, each points represented by an object containing the following properties:
```javascript
{
// X Value
x: <Number>,
// Y Value
y: <Number>,
// Bubble radius in pixels (not scaled).
r: <Number>
}
```
**Important:** the radius property, `r` is **not** scaled by the chart, it is the raw radius in pixels of the bubble that is drawn on the canvas.

100
WebRoot/node_modules/chart.js/docs/charts/doughnut.md generated vendored Normal file
View File

@ -0,0 +1,100 @@
# Doughnut and Pie
Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their `cutoutPercentage`. This equates what percentage of the inner should be cut out. This defaults to `0` for pie charts, and `50` for doughnuts.
They are also registered under two aliases in the `Chart` core. Other than their different default value, and different alias, they are exactly the same.
{% chartjs %}
{
"type": "doughnut",
"data": {
"labels": [
"Red",
"Blue",
"Yellow",
],
"datasets": [{
"label": "My First Dataset",
"data": [300, 50, 100],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)",
]
}]
},
}
{% endchartjs %}
## Example Usage
```javascript
// For a pie chart
var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
});
```
```javascript
// And for a doughnut chart
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});
```
## Dataset Properties
The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a the dataset's arc are generally set this way.
| Name | Type | Description
| ---- | ---- | -----------
| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
| `borderWidth` | `Number[]` | The border width of the arcs in the dataset.
| `hoverBackgroundColor` | `Color[]` | The fill colour of the arcs when hovered.
| `hoverBorderColor` | `Color[]` | The stroke colour of the arcs when hovered.
| `hoverBorderWidth` | `Number[]` | The stroke width of the arcs when hovered.
## Config Options
These are the customisation options specific to Pie & Doughnut charts. These options are merged with the global chart configuration options, and form the options of the chart.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `cutoutPercentage` | `Number` | `50` - for doughnut, `0` - for pie | The percentage of the chart that is cut out of the middle.
| `rotation` | `Number` | `-0.5 * Math.PI` | Starting angle to draw arcs from.
| `circumference` | `Number` | `2 * Math.PI` | Sweep to allow arcs to cover
| `animation.animateRotate` | `Boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
| `animation.animateScale` | `Boolean` | `false` | If true, will animate scaling the chart from the center outwards.
## Default Options
We can also change these default values for each Doughnut type that is created, this object is available at `Chart.defaults.doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.defaults.pie`, with the only difference being `cutoutPercentage` being set to 0.
## Data Structure
For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly
```javascript
data = {
datasets: [{
data: [10, 20, 30]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
```

226
WebRoot/node_modules/chart.js/docs/charts/line.md generated vendored Normal file
View File

@ -0,0 +1,226 @@
# Line
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
{% chartjs %}
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"lineTension": 0.1
}]
},
"options": {
}
}
{% endchartjs %}
## Example Usage
```javascript
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
```
## Dataset Properties
The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
| Name | Type | Description
| ---- | ---- | -----------
| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
| `yAxisID` | `String` | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
| `backgroundColor` | `Color` | The fill color under the line. See [Colors](../general/colors.md#colors)
| `borderColor` | `Color` | The color of the line. See [Colors](../general/colors.md#colors)
| `borderWidth` | `Number` | The width of the line in pixels.
| `borderDash` | `Number[]` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
| `borderDashOffset` | `Number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
| `borderCapStyle` | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)
| `borderJoinStyle` | `String` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
| `cubicInterpolationMode` | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. [more...](#cubicinterpolationmode)
| `fill` | `Boolean/String` | How to fill the area under the line. See [area charts](area.md)
| `lineTension` | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
| `pointBackgroundColor` | `Color/Color[]` | The fill color for points.
| `pointBorderColor` | `Color/Color[]` | The border color for points.
| `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels.
| `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered.
| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](../configuration/elements#point-styles)
| `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events.
| `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered.
| `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered.
| `pointHoverBorderWidth` | `Number/Number[]` | Border width of point when hovered.
| `pointHoverRadius` | `Number/Number[]` | The radius of the point when hovered.
| `showLine` | `Boolean` | If false, the line is not drawn for this dataset.
| `spanGaps` | `Boolean` | If true, lines will be drawn between points with no or null data. If false, points with `NaN` data will create a break in the line
| `steppedLine` | `Boolean/String` | If the line is shown as a stepped line. [more...](#stepped-line)
### cubicInterpolationMode
The following interpolation modes are supported:
* 'default'
* 'monotone'.
The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.
The 'monotone' algorithm is more suited to `y = f(x)` datasets : it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points.
If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
### Stepped Line
The following values are supported for `steppedLine`:
* `false`: No Step Interpolation (default)
* `true`: Step-before Interpolation (eq. 'before')
* `'before'`: Step-before Interpolation
* `'after'`: Step-after Interpolation
If the `steppedLine` value is set to anything other than false, `lineTension` will be ignored.
## Configuration Options
The line chart defines the following configuration options. These options are merged with the global chart configuration options, `Chart.defaults.global`, to form the options passed to the chart.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `showLines` | `Boolean` | `true` | If false, the lines between points are not drawn.
| `spanGaps` | `Boolean` | `false` | If false, NaN data causes a break in the line.
## Default Options
It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in `Chart.defaults.line`. Changing the global options only affects charts created after the change. Existing charts are not changed.
For example, to configure all line charts with `spanGaps = true` you would do:
```javascript
Chart.defaults.line.spanGaps = true;
```
## Data Structure
The `data` property of a dataset for a line chart can be passed in two formats.
### Number[]
```javascript
data: [20, 10]
```
When the `data` array is an array of numbers, the x axis is generally a [category](../axes/cartesian/category.md#category-cartesian-axis). The points are placed onto the axis using their position in the array. When a line chart is created with a category axis, the `labels` property of the data object must be specified.
### Point[]
```javascript
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
```
This alternate is used for sparse datasets, such as those in [scatter charts](./scatter.md#scatter-chart). Each data point is specified using an object containing `x` and `y` properties.
# Stacked Area Chart
Line charts can be configured into stacked area charts by changing the settings on the y axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces.
```javascript
var stackedLine = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
```
# High Performance Line Charts
When charting a lot of data, the chart render time may start to get quite large. In that case, the following strategies can be used to improve performance.
## Data Decimation
Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide.
There are many approaches to data decimation and selection of an algorithm will depend on your data and the results you want to achieve. For instance, [min/max](http://digital.ni.com/public.nsf/allkb/F694FFEEA0ACF282862576020075F784) decimation will preserve peaks in your data but could require up to 4 points for each pixel. This type of decimation would work well for a very noisy signal where you need to see data peaks.
## Disable Bezier Curves
If you are drawing lines on your chart, disabling bezier curves will improve render times since drawing a straight line is more performant than a bezier curve.
To disable bezier curves for an entire chart:
```javascript
new Chart(ctx, {
type: 'line',
data: data,
options: {
elements: {
line: {
tension: 0, // disables bezier curves
}
}
}
});
```
## Disable Line Drawing
If you have a lot of data points, it can be more performant to disable rendering of the line for a dataset and only draw points. Doing this means that there is less to draw on the canvas which will improve render performance.
To disable lines:
```javascript
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
showLine: false, // disable for a single dataset
}]
},
options: {
showLines: false, // disable for all datasets
}
});
```
## Disable Animations
If your charts have long render times, it is a good idea to disable animations. Doing so will mean that the chart needs to only be rendered once during an update instead of multiple times. This will have the effect of reducing CPU usage and improving general page performance.
To disable animations
```javascript
new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
}
});
```

72
WebRoot/node_modules/chart.js/docs/charts/mixed.md generated vendored Normal file
View File

@ -0,0 +1,72 @@
# Mixed Chart Types
With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.
Creating a mixed chart starts with the initialization of a basic chart.
```javascript
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
```
At this point we have a standard bar chart. Now we need to convert one of the datasets to a line dataset.
```javascript
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [10, 20, 30, 40]
}, {
label: 'Line Dataset',
data: [50, 50, 50, 50],
// Changes this dataset to become a line
type: 'line'
}],
labels: ['January', 'February', 'March', 'April']
},
options: options
});
```
At this point we have a chart rendering how we'd like. It's important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the `type` field.
{% chartjs %}
{
"type": "bar",
"data": {
"labels": [
"January",
"February",
"March",
"April"
],
"datasets": [{
"label": "Bar Dataset",
"data": [10, 20, 30, 40],
"borderColor": "rgb(255, 99, 132)",
"backgroundColor": "rgba(255, 99, 132, 0.2)"
}, {
"label": "Line Dataset",
"data": [50, 50, 50, 50],
"type": "line",
"fill": false,
"borderColor": "rgb(54, 162, 235)"
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}
{% endchartjs %}

94
WebRoot/node_modules/chart.js/docs/charts/polar.md generated vendored Normal file
View File

@ -0,0 +1,94 @@
# Polar Area
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
{% chartjs %}
{
"type": "polarArea",
"data": {
"labels": [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
],
"datasets": [{
"label": "My First Dataset",
"data": [11, 16, 7, 3, 14],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(75, 192, 192)",
"rgb(255, 205, 86)",
"rgb(201, 203, 207)",
"rgb(54, 162, 235)"
]
}]
},
}
{% endchartjs %}
## Example Usage
```javascript
new Chart(ctx, {
data: data,
type: 'polarArea',
options: options
});
```
## Dataset Properties
The following options can be included in a polar area chart dataset to configure options for that specific dataset.
| Name | Type | Description
| ---- | ---- | -----------
| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
| `borderWidth` | `Number[]` | The border width of the arcs in the dataset.
| `hoverBackgroundColor` | `Color[]` | The fill colour of the arcs when hovered.
| `hoverBorderColor` | `Color[]` | The stroke colour of the arcs when hovered.
| `hoverBorderWidth` | `Number[]` | The stroke width of the arcs when hovered.
## Config Options
These are the customisation options specific to Polar Area charts. These options are merged with the [global chart default options](#default-options), and form the options of the chart.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `startAngle` | `Number` | `-0.5 * Math.PI` | Starting angle to draw arcs for the first item in a dataset.
| `animation.animateRotate` | `Boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
| `animation.animateScale` | `Boolean` | `true` | If true, will animate scaling the chart from the center outwards.
## Default Options
We can also change these defaults values for each PolarArea type that is created, this object is available at `Chart.defaults.polarArea`. Changing the global options only affects charts created after the change. Existing charts are not changed.
For example, to configure all new polar area charts with `animateScale = false` you would do:
```javascript
Chart.defaults.polarArea.animation.animateScale = false;
```
## Data Structure
For a polar area chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly for each slice.
```javascript
data = {
datasets: [{
data: [10, 20, 30]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
```

145
WebRoot/node_modules/chart.js/docs/charts/radar.md generated vendored Normal file
View File

@ -0,0 +1,145 @@
# Radar
A radar chart is a way of showing multiple data points and the variation between them.
They are often useful for comparing the points of two or more different data sets.
{% chartjs %}
{
"type": "radar",
"data": {
"labels": [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running"
],
"datasets": [{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)",
"fill": true
}, {
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)",
"fill": true
}]
},
"options": {
"elements": {
"line": {
"tension": 0,
"borderWidth": 3
}
}
}
}
{% endchartjs %}
## Example Usage
```javascript
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
```
## Dataset Properties
The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
| Name | Type | Description
| ---- | ---- | -----------
| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
| `backgroundColor` | `Color` | The fill color under the line. See [Colors](../general/colors.md#colors)
| `borderColor` | `Color` | The color of the line. See [Colors](../general/colors.md#colors)
| `borderWidth` | `Number` | The width of the line in pixels.
| `borderDash` | `Number[]` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
| `borderDashOffset` | `Number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
| `borderCapStyle` | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)
| `borderJoinStyle` | `String` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
| `fill` | `Boolean/String` | How to fill the area under the line. See [area charts](area.md)
| `lineTension` | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines.
| `pointBackgroundColor` | `Color/Color[]` | The fill color for points.
| `pointBorderColor` | `Color/Color[]` | The border color for points.
| `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels.
| `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered.
| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](#pointstyle)
| `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events.
| `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered.
| `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered.
| `pointHoverBorderWidth` | `Number/Number[]` | Border width of point when hovered.
| `pointHoverRadius` | `Number/Number[]` | The radius of the point when hovered.
### pointStyle
The style of point. Options are:
* 'circle'
* 'cross'
* 'crossRot'
* 'dash'.
* 'line'
* 'rect'
* 'rectRounded'
* 'rectRot'
* 'star'
* 'triangle'
If the option is an image, that image is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage).
## Configuration Options
Unlike other charts, the radar chart has no chart specific options.
## Scale Options
The radar chart supports only a single scale. The options for this scale are defined in the `scale` property.
```javascript
options = {
scale: {
// Hides the scale
display: false
}
};
```
## Default Options
It is common to want to apply a configuration setting to all created radar charts. The global radar chart settings are stored in `Chart.defaults.radar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
## Data Structure
The `data` property of a dataset for a radar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
```javascript
data: [20, 10]
```
For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart.
```javascript
data: {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [{
data: [20, 10, 4, 2]
}]
}
```

49
WebRoot/node_modules/chart.js/docs/charts/scatter.md generated vendored Normal file
View File

@ -0,0 +1,49 @@
# Scatter Chart
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
```javascript
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
```
## Dataset Properties
The scatter chart supports all of the same properties as the [line chart](./line.md#dataset-properties).
## Data Structure
Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
```javascript
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
```