mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Merge branch 'master' into feature/pan-support
Conflicts: src/core/core.controller.js
This commit is contained in:
Evert Timberg
commit
b4a06f6e34
@ -1,7 +1,6 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "5.6"
|
||||
- "4.3"
|
||||
- "5.10"
|
||||
|
||||
before_install:
|
||||
- "export CHROME_BIN=/usr/bin/google-chrome"
|
||||
|
||||
@ -145,13 +145,13 @@ position | String | 'top' | Position of the legend. Options are 'top' or 'bottom
|
||||
fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes)
|
||||
onClick | Function | `function(event, legendItem) {}` | A callback that is called when a click is registered on top of a label item
|
||||
labels |-|-|-
|
||||
*labels*boxWidth | Number | 40 | Width of coloured box
|
||||
*labels*fontSize | Number | 12 | Font size
|
||||
*labels*fontStyle | String | "normal" |
|
||||
*labels*fontColor | Color | "#666" |
|
||||
*labels*fontFamily | String | "Helvetica Neue" |
|
||||
*labels*padding | Number | 10 | Padding between rows of colored boxes
|
||||
*labels*generateLabels: | Function | `function(data) { }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case.
|
||||
*labels*.boxWidth | Number | 40 | Width of coloured box
|
||||
*labels*.fontSize | Number | 12 | Font size
|
||||
*labels*.fontStyle | String | "normal" |
|
||||
*labels*.fontColor | Color | "#666" |
|
||||
*labels*.fontFamily | String | "Helvetica Neue" |
|
||||
*labels*.padding | Number | 10 | Padding between rows of colored boxes
|
||||
*labels*.generateLabels: | Function | `function(data) { }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case.
|
||||
|
||||
The global options for tooltips are defined in `Chart.defaults.global.tooltips`.
|
||||
|
||||
|
||||
@ -39,13 +39,15 @@ var data = {
|
||||
// Boolean - if true fill the area under the line
|
||||
fill: false,
|
||||
|
||||
// Tension - bezier curve tension of the line. Set to 0 to draw straight lines connecting points
|
||||
// Used to be called "tension" but was renamed for consistency. The old option name continues to work for compatibility.
|
||||
lineTension: 0.1,
|
||||
|
||||
// String - the color to fill the area under the line with if fill is true
|
||||
backgroundColor: "rgba(220,220,220,0.2)",
|
||||
backgroundColor: "rgba(75,192,192,0.4)",
|
||||
|
||||
// The properties below allow an array to be specified to change the value of the item at the given index
|
||||
|
||||
// String or array - Line color
|
||||
borderColor: "rgba(220,220,220,1)",
|
||||
// String - Line color
|
||||
borderColor: "rgba(75,192,192,1)",
|
||||
|
||||
// String - cap style of the line. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
|
||||
borderCapStyle: 'butt',
|
||||
@ -59,32 +61,37 @@ var data = {
|
||||
// String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
|
||||
borderJoinStyle: 'miter',
|
||||
|
||||
// String or array - Point stroke color
|
||||
pointBorderColor: "rgba(220,220,220,1)",
|
||||
// The properties below allow an array to be specified to change the value of the item at the given index
|
||||
|
||||
// String or array - Point fill color
|
||||
// String or Array - Point stroke color
|
||||
pointBorderColor: "rgba(75,192,192,1)",
|
||||
|
||||
// String or Array - Point fill color
|
||||
pointBackgroundColor: "#fff",
|
||||
|
||||
// Number or array - Stroke width of point border
|
||||
// Number or Array - Stroke width of point border
|
||||
pointBorderWidth: 1,
|
||||
|
||||
// Number or array - Radius of point when hovered
|
||||
// Number or Array - Radius of point when hovered
|
||||
pointHoverRadius: 5,
|
||||
|
||||
// String or array - point background color when hovered
|
||||
pointHoverBackgroundColor: "rgba(220,220,220,1)",
|
||||
// String or Array - point background color when hovered
|
||||
pointHoverBackgroundColor: "rgba(75,192,192,1)",
|
||||
|
||||
// Point border color when hovered
|
||||
// String or Array - Point border color when hovered
|
||||
pointHoverBorderColor: "rgba(220,220,220,1)",
|
||||
|
||||
// Number or array - border width of point when hovered
|
||||
// Number or Array - border width of point when hovered
|
||||
pointHoverBorderWidth: 2,
|
||||
|
||||
// Tension - bezier curve tension of the line. Set to 0 to draw straight Wlines connecting points
|
||||
tension: 0.1,
|
||||
// Number or Array - the pixel size of the point shape. Can be set to 0 to not render a circle over the point
|
||||
// Used to be called "radius" but was renamed for consistency. The old option name continues to work for compatibility.
|
||||
pointRadius: 1,
|
||||
|
||||
// Number - the pixel size of the point shape. Can be set to 0 to not render a circle over the point
|
||||
radius: 1,
|
||||
// Number or Array - the pixel size of the non-displayed point that reacts to mouse hover events
|
||||
//
|
||||
// Used to be called "hitRadius" but was renamed for consistency. The old option name continues to work for compatibility.
|
||||
pointHitRadius: 10,
|
||||
|
||||
// The actual data
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
@ -95,14 +102,14 @@ var data = {
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fill: false,
|
||||
backgroundColor: "rgba(220,220,220,0.2)",
|
||||
borderColor: "rgba(220,220,220,1)",
|
||||
pointBorderColor: "rgba(220,220,220,1)",
|
||||
backgroundColor: "rgba(255,205,86,0.4)",
|
||||
borderColor: "rgba(255,205,86,1)",
|
||||
pointBorderColor: "rgba(255,205,86,1)",
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: "rgba(220,220,220,1)",
|
||||
pointHoverBorderColor: "rgba(220,220,220,1)",
|
||||
pointHoverBackgroundColor: "rgba(255,205,86,1)",
|
||||
pointHoverBorderColor: "rgba(255,205,86,1)",
|
||||
pointHoverBorderWidth: 2,
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
@ -119,7 +126,7 @@ The label key on each dataset is optional, and can be used when generating a sca
|
||||
|
||||
These are the customisation options specific to Line charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.
|
||||
|
||||
The default options for line chart are defined in `Chart.defaults.Line`.
|
||||
The default options for line chart are defined in `Chart.defaults.line`.
|
||||
|
||||
Name | Type | Default | Description
|
||||
--- | --- | --- | ---
|
||||
@ -135,7 +142,7 @@ scales | - | - | -
|
||||
type | String | "category" | As defined in ["Category"](#scales-category-scale).
|
||||
id | String | "x-axis-1" | Id of the axis so that data can bind to it.
|
||||
| | |
|
||||
*scales*.yAxes | Array | `[{type:"linear","id":"y-axis-1"}]` | Defines all of the x axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options.
|
||||
*scales*.yAxes | Array | `[{type:"linear","id":"y-axis-1"}]` | Defines all of the y axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options.
|
||||
*Options for yAxes* | | |
|
||||
type | String | "linear" | As defined in ["Linear"](#scales-linear-scale).
|
||||
id | String | "y-axis-1" | Id of the axis so that data can bind to it.
|
||||
|
||||
@ -32,19 +32,19 @@ var data = {
|
||||
|
||||
// The properties below allow an array to be specified to change the value of the item at the given index
|
||||
// String or array - the bar color
|
||||
backgroundColor: "rgba(220,220,220,0.2)",
|
||||
backgroundColor: "rgba(255,99,132,0.2)",
|
||||
|
||||
// String or array - bar stroke color
|
||||
borderColor: "rgba(220,220,220,1)",
|
||||
borderColor: "rgba(255,99,132,1)",
|
||||
|
||||
// Number or array - bar border width
|
||||
borderWidth: 1,
|
||||
|
||||
// String or array - fill color when hovered
|
||||
hoverBackgroundColor: "rgba(220,220,220,0.2)",
|
||||
hoverBackgroundColor: "rgba(255,99,132,0.4)",
|
||||
|
||||
// String or array - border color when hovered
|
||||
hoverBorderColor: "rgba(220,220,220,1)",
|
||||
hoverBorderColor: "rgba(255,99,132,1)",
|
||||
|
||||
// The actual data
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
@ -54,11 +54,11 @@ var data = {
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
backgroundColor: "rgba(220,220,220,0.2)",
|
||||
borderColor: "rgba(220,220,220,1)",
|
||||
backgroundColor: "rgba(54,162,235,0.2)",
|
||||
borderColor: "rgba(54,162,235,1)",
|
||||
borderWidth: 1,
|
||||
hoverBackgroundColor: "rgba(220,220,220,0.2)",
|
||||
hoverBorderColor: "rgba(220,220,220,1)",
|
||||
hoverBackgroundColor: "rgba(54,162,235,0.4)",
|
||||
hoverBorderColor: "rgba(54,162,235,1)",
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
@ -73,7 +73,7 @@ The label key on each dataset is optional, and can be used when generating a sca
|
||||
|
||||
These are the customisation options specific to Bar charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart.
|
||||
|
||||
The default options for bar chart are defined in `Chart.defaults.Bar`.
|
||||
The default options for bar chart are defined in `Chart.defaults.bar`.
|
||||
|
||||
Name | Type | Default | Description
|
||||
--- |:---:| --- | ---
|
||||
@ -128,7 +128,7 @@ new Chart(ctx, {
|
||||
// for both x and y axes.
|
||||
```
|
||||
|
||||
We can also change these defaults values for each Bar type that is created, this object is available at `Chart.defaults.Bar`.
|
||||
We can also change these defaults values for each Bar type that is created, this object is available at `Chart.defaults.bar`.
|
||||
|
||||
#### barPercentage vs categoryPercentage
|
||||
|
||||
|
||||
@ -29,22 +29,22 @@ var data = {
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
backgroundColor: "rgba(220,220,220,0.2)",
|
||||
borderColor: "rgba(220,220,220,1)",
|
||||
pointBackgroundColor: "rgba(220,220,220,1)",
|
||||
backgroundColor: "rgba(179,181,198,0.2)",
|
||||
borderColor: "rgba(179,181,198,1)",
|
||||
pointBackgroundColor: "rgba(179,181,198,1)",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: "rgba(220,220,220,1)",
|
||||
pointHoverBorderColor: "rgba(179,181,198,1)",
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
backgroundColor: "rgba(151,187,205,0.2)",
|
||||
borderColor: "rgba(151,187,205,1)",
|
||||
pointBackgroundColor: "rgba(151,187,205,1)",
|
||||
backgroundColor: "rgba(255,99,132,0.2)",
|
||||
borderColor: "rgba(255,99,132,1)",
|
||||
pointBackgroundColor: "rgba(255,99,132,1)",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: "rgba(151,187,205,1)",
|
||||
pointHoverBorderColor: "rgba(255,99,132,1)",
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
|
||||
@ -27,18 +27,18 @@ new Chart(ctx, {
|
||||
var data = {
|
||||
datasets: [{
|
||||
data: [
|
||||
10,
|
||||
32,
|
||||
53,
|
||||
14,
|
||||
22,
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
3,
|
||||
14
|
||||
],
|
||||
backgroundColor: [
|
||||
"#F7464A",
|
||||
"#46BFBD",
|
||||
"#FDB45C",
|
||||
"#949FB1",
|
||||
"#4D5360",
|
||||
"#FF6384",
|
||||
"#4BC0C0",
|
||||
"#FFCE56",
|
||||
"#E7E9ED",
|
||||
"#36A2EB"
|
||||
],
|
||||
label: 'My dataset' // for legend
|
||||
}],
|
||||
@ -47,7 +47,7 @@ var data = {
|
||||
"Green",
|
||||
"Yellow",
|
||||
"Grey",
|
||||
"Dark Grey"
|
||||
"Blue"
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
@ -7,7 +7,7 @@ Pie and doughnut charts are probably the most commonly used chart there are. The
|
||||
|
||||
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 `percentageInnerCutout`. This equates what percentage of the inner should be cut out. This defaults to `0` for pie charts, and `50` for doughnuts.
|
||||
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.
|
||||
|
||||
@ -24,15 +24,17 @@ They are also registered under two aliases in the `Chart` core. Other than their
|
||||
|
||||
```javascript
|
||||
// For a pie chart
|
||||
var myPieChart = new Chart(ctx[0],{
|
||||
type:'pie',
|
||||
var myPieChart = new Chart(ctx,{
|
||||
type: 'pie',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
```
|
||||
|
||||
```javascript
|
||||
// And for a doughnut chart
|
||||
var myDoughnutChart = new Chart(ctx[1], {
|
||||
type:'doughnut',
|
||||
var myDoughnutChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
@ -51,20 +53,20 @@ var data = {
|
||||
{
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
"#F7464A",
|
||||
"#46BFBD",
|
||||
"#FDB45C"
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#FF5A5E",
|
||||
"#5AD3D1",
|
||||
"#FFC870"
|
||||
"#FF6384",
|
||||
"#36A2EB",
|
||||
"#FFCE56"
|
||||
]
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
For a pie chart, you must pass in an array of objects with a value and an optional color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
|
||||
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 can also add an array of background colors. The color attributes should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
|
||||
|
||||
### Chart options
|
||||
|
||||
@ -98,4 +100,4 @@ new Chart(ctx,{
|
||||
// and the Doughnut chart defaults but this particular instance will have `animateScale` set to `true`.
|
||||
```
|
||||
|
||||
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 `percentageInnerCutout` being set to 0.
|
||||
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.
|
||||
@ -143,7 +143,7 @@ var myPieChart = new Chart(ctx, {
|
||||
|
||||
// Otherwise, tooltip will be an object with all tooltip properties like:
|
||||
|
||||
// tooltip.caretHeight
|
||||
// tooltip.caretSize
|
||||
// tooltip.caretPadding
|
||||
// tooltip.chart
|
||||
// tooltip.cornerRadius
|
||||
@ -390,6 +390,10 @@ Plugins should derive from Chart.PluginBase and implement the following interfac
|
||||
beforeUpdate: function(chartInstance) { },
|
||||
afterUpdate: function(chartInstance) { },
|
||||
|
||||
// This is called at the start of a render. It is only called once, even if the animation will run for a number of frames. Use beforeDraw or afterDraw
|
||||
// to do something on each animation frame
|
||||
beforeRender: function(chartInstance) { },
|
||||
|
||||
// Easing is for animation
|
||||
beforeDraw: function(chartInstance, easing) { },
|
||||
afterDraw: function(chartInstance, easing) { }
|
||||
|
||||
@ -4,25 +4,11 @@ anchor: notes
|
||||
---
|
||||
|
||||
### Browser support
|
||||
Browser support for the canvas element is available in all modern & major mobile browsers <a href="http://caniuse.com/canvas" target="_blank">(caniuse.com/canvas)</a>.
|
||||
|
||||
For IE8 & below, I would recommend using the polyfill ExplorerCanvas - available at <a href="https://code.google.com/p/explorercanvas/" target="_blank">https://code.google.com/p/explorercanvas/</a>. It falls back to Internet explorer's format VML when canvas support is not available. Example use:
|
||||
Chart.js offers support for all browsers where canvas is supported.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<!--[if lte IE 8]>
|
||||
<script src="excanvas.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
```
|
||||
Browser support for the canvas element is available in all modern & major mobile browsers <a href="http://http://caniuse.com/#feat=canvas" target="_blank">(http://caniuse.com/#feat=canvas)</a>.
|
||||
|
||||
Usually I would recommend feature detection to choose whether or not to load a polyfill, rather than IE conditional comments, however in this case, VML is a Microsoft proprietary format, so it will only work in IE.
|
||||
|
||||
Some important points to note in my experience using ExplorerCanvas as a fallback.
|
||||
|
||||
- Initialise charts on load rather than DOMContentReady when using the library, as sometimes a race condition will occur, and it will result in an error when trying to get the 2d context of a canvas.
|
||||
- New VML DOM elements are being created for each animation frame and there is no hardware acceleration. As a result animation is usually slow and jerky, with flashing text. It is a good idea to dynamically turn off animation based on canvas support. I recommend using the excellent <a href="http://modernizr.com/" target="_blank">Modernizr</a> to do this.
|
||||
- When declaring fonts, the library explorercanvas requires the font name to be in single quotes inside the string. For example, instead of your scaleFontFamily property being simply "Arial", explorercanvas support, use "'Arial'" instead. Chart.js does this for default values.
|
||||
|
||||
### Bugs & issues
|
||||
|
||||
|
||||
17
gulpfile.js
17
gulpfile.js
@ -7,6 +7,7 @@ var gulp = require('gulp'),
|
||||
connect = require('gulp-connect'),
|
||||
replace = require('gulp-replace'),
|
||||
htmlv = require('gulp-html-validator'),
|
||||
insert = require('gulp-insert'),
|
||||
inquirer = require('inquirer'),
|
||||
semver = require('semver'),
|
||||
exec = require('child_process').exec,
|
||||
@ -23,6 +24,16 @@ var srcDir = './src/';
|
||||
var outDir = './dist/';
|
||||
var testDir = './test/';
|
||||
|
||||
var header = "/*!\n\
|
||||
* Chart.js\n\
|
||||
* http://chartjs.org/\n\
|
||||
* Version: {{ version }}\n\
|
||||
*\n\
|
||||
* Copyright 2016 Nick Downie\n\
|
||||
* Released under the MIT license\n\
|
||||
* https://github.com/nnnick/Chart.js/blob/master/LICENSE.md\n\
|
||||
*/\n";
|
||||
|
||||
var preTestFiles = [
|
||||
'./node_modules/moment/min/moment.min.js',
|
||||
];
|
||||
@ -54,9 +65,10 @@ gulp.task('default', ['build', 'watch']);
|
||||
|
||||
function buildTask() {
|
||||
|
||||
var bundled = browserify('./src/Chart.js')
|
||||
var bundled = browserify('./src/chart.js')
|
||||
.bundle()
|
||||
.pipe(source('Chart.bundle.js'))
|
||||
.pipe(insert.prepend(header))
|
||||
.pipe(streamify(replace('{{ version }}', package.version)))
|
||||
.pipe(gulp.dest(outDir))
|
||||
.pipe(streamify(uglify({
|
||||
@ -65,10 +77,11 @@ function buildTask() {
|
||||
.pipe(streamify(concat('Chart.bundle.min.js')))
|
||||
.pipe(gulp.dest(outDir));
|
||||
|
||||
var nonBundled = browserify('./src/Chart.js')
|
||||
var nonBundled = browserify('./src/chart.js')
|
||||
.ignore('moment')
|
||||
.bundle()
|
||||
.pipe(source('Chart.js'))
|
||||
.pipe(insert.prepend(header))
|
||||
.pipe(streamify(replace('{{ version }}', package.version)))
|
||||
.pipe(gulp.dest(outDir))
|
||||
.pipe(streamify(uglify({
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"gulp-concat": "~2.1.x",
|
||||
"gulp-connect": "~2.0.5",
|
||||
"gulp-html-validator": "^0.0.2",
|
||||
"gulp-insert": "~0.5.0",
|
||||
"gulp-jshint": "~1.5.1",
|
||||
"gulp-karma": "0.0.4",
|
||||
"gulp-replace": "^0.4.0",
|
||||
|
||||
154
samples/different-point-sizes.html
Normal file
154
samples/different-point-sizes.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../dist/Chart.bundle.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
|
||||
};
|
||||
var randomColorFactor = function() {
|
||||
return Math.round(Math.random() * 255);
|
||||
};
|
||||
var randomColor = function(opacity) {
|
||||
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "dataset - big points",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: 15,
|
||||
pointHoverRadius: 10,
|
||||
}, {
|
||||
label: "dataset - individual point sizes",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: [2, 4, 6, 18, 0, 12, 20],
|
||||
}, {
|
||||
label: "dataset - large pointHoverRadius",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
||||
fill: false,
|
||||
pointHoverRadius: 30,
|
||||
}, {
|
||||
label: "dataset - large pointHitRadius",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
||||
fill: false,
|
||||
pointHitRadius: 20,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
hover: {
|
||||
mode: 'label'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Different point sizes'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.each(config.data.datasets, function(i, dataset) {
|
||||
var background = randomColor(0.5);
|
||||
dataset.borderColor = background;
|
||||
dataset.backgroundColor = background;
|
||||
dataset.pointBorderColor = background;
|
||||
dataset.pointBackgroundColor = background;
|
||||
dataset.pointBorderWidth = 1;
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("canvas").getContext("2d");
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
$('#randomizeData').click(function() {
|
||||
$.each(config.data.datasets, function(i, dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
$('#addData').click(function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
var month = MONTHS[config.data.labels.length % MONTHS.length];
|
||||
config.data.labels.push(month);
|
||||
|
||||
$.each(config.data.datasets, function(i, dataset) {
|
||||
dataset.data.push(randomScalingFactor());
|
||||
if (Array.isArray(dataset.pointRadius)) {
|
||||
dataset.pointRadius.push(Math.random() * 30);
|
||||
}
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
$('#removeData').click(function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset, datasetIndex) {
|
||||
dataset.data.pop();
|
||||
if (Array.isArray(dataset.pointRadius)) {
|
||||
dataset.pointRadius.pop();
|
||||
}
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -52,8 +52,9 @@
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
}, {
|
||||
label: "My Third dataset",
|
||||
label: "My Third dataset - No bezier",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
||||
lineTension: 0,
|
||||
fill: false,
|
||||
}, {
|
||||
label: "My Fourth dataset",
|
||||
|
||||
11
src/chart.js
11
src/chart.js
@ -1,14 +1,3 @@
|
||||
/*!
|
||||
* Chart.js
|
||||
* http://chartjs.org/
|
||||
* Version: {{ version }}
|
||||
*
|
||||
* Copyright 2015 Nick Downie
|
||||
* Released under the MIT license
|
||||
* https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
|
||||
*/
|
||||
|
||||
|
||||
var Chart = require('./core/core.js')();
|
||||
|
||||
require('./core/core.helpers')(Chart);
|
||||
|
||||
@ -184,6 +184,12 @@ module.exports = function(Chart) {
|
||||
var categoryWidth = tickWidth * xScale.options.categoryPercentage;
|
||||
var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
|
||||
var fullBarWidth = categoryWidth / datasetCount;
|
||||
|
||||
if (xScale.ticks.length !== this.chart.data.labels.length) {
|
||||
var perc = xScale.ticks.length / this.chart.data.labels.length;
|
||||
fullBarWidth = fullBarWidth * perc;
|
||||
}
|
||||
|
||||
var barWidth = fullBarWidth * xScale.options.barPercentage;
|
||||
var barSpacing = fullBarWidth - (fullBarWidth * xScale.options.barPercentage);
|
||||
|
||||
|
||||
@ -21,11 +21,11 @@ module.exports = function(Chart) {
|
||||
|
||||
if (chart.data.datasets.length) {
|
||||
for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
|
||||
text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
|
||||
text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '"></span>');
|
||||
if (chart.data.labels[i]) {
|
||||
text.push(chart.data.labels[i]);
|
||||
}
|
||||
text.push('</span></li>');
|
||||
text.push('</li>');
|
||||
}
|
||||
}
|
||||
|
||||
@ -285,4 +285,4 @@ module.exports = function(Chart) {
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
@ -86,9 +86,16 @@ module.exports = function(Chart) {
|
||||
// Data
|
||||
line._children = points;
|
||||
// Model
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined))
|
||||
{
|
||||
this.getDataset().lineTension = this.getDataset().tension;
|
||||
}
|
||||
|
||||
line._model = {
|
||||
// Appearance
|
||||
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
|
||||
tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension),
|
||||
backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
|
||||
borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
|
||||
borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
|
||||
@ -178,18 +185,28 @@ module.exports = function(Chart) {
|
||||
point._index = index;
|
||||
|
||||
// Desired view properties
|
||||
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
|
||||
{
|
||||
this.getDataset().pointRadius = this.getDataset().radius;
|
||||
}
|
||||
if ((this.getDataset().hitRadius !== undefined) && (this.getDataset().pointHitRadius === undefined))
|
||||
{
|
||||
this.getDataset().pointHitRadius = this.getDataset().hitRadius;
|
||||
}
|
||||
|
||||
point._model = {
|
||||
x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
|
||||
y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo),
|
||||
// Appearance
|
||||
tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
|
||||
radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
|
||||
radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
|
||||
pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
|
||||
backgroundColor: this.getPointBackgroundColor(point, index),
|
||||
borderColor: this.getPointBorderColor(point, index),
|
||||
borderWidth: this.getPointBorderWidth(point, index),
|
||||
// Tooltip
|
||||
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
|
||||
hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointHitRadius, index, this.chart.options.elements.point.hitRadius)
|
||||
};
|
||||
|
||||
point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
|
||||
@ -233,7 +250,7 @@ module.exports = function(Chart) {
|
||||
helpers.previousItem(this.getDataset().metaData, index)._model,
|
||||
point._model,
|
||||
helpers.nextItem(this.getDataset().metaData, index)._model,
|
||||
point._model.tension
|
||||
this.getDataset().metaDataset._model.tension
|
||||
);
|
||||
|
||||
// Prevent the bezier going outside of the bounds of the graph
|
||||
@ -281,7 +298,13 @@ module.exports = function(Chart) {
|
||||
var dataset = this.chart.data.datasets[point._datasetIndex];
|
||||
var index = point._index;
|
||||
|
||||
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
|
||||
// Compatibility: If the properties are defined with only the old name, use those values
|
||||
if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined))
|
||||
{
|
||||
this.getDataset().pointRadius = this.getDataset().radius;
|
||||
}
|
||||
|
||||
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius);
|
||||
point._model.backgroundColor = this.getPointBackgroundColor(point, index);
|
||||
point._model.borderColor = this.getPointBorderColor(point, index);
|
||||
point._model.borderWidth = this.getPointBorderWidth(point, index);
|
||||
|
||||
@ -250,6 +250,11 @@ module.exports = function(Chart) {
|
||||
// Make sure dataset controllers are updated and new controllers are reset
|
||||
var newControllers = this.buildOrUpdateControllers();
|
||||
|
||||
// Make sure all dataset controllers have correct meta data counts
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
dataset.controller.buildOrUpdateElements();
|
||||
});
|
||||
|
||||
Chart.layoutService.update(this, this.chart.width, this.chart.height);
|
||||
|
||||
// Can only reset the new controllers after the scales have been updated
|
||||
@ -257,11 +262,6 @@ module.exports = function(Chart) {
|
||||
controller.reset();
|
||||
});
|
||||
|
||||
// Make sure all dataset controllers have correct meta data counts
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
dataset.controller.buildOrUpdateElements();
|
||||
});
|
||||
|
||||
// This will loop through any data and do the appropriate element update for the type
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
dataset.controller.update();
|
||||
@ -272,6 +272,7 @@ module.exports = function(Chart) {
|
||||
},
|
||||
|
||||
render: function render(duration, lazy) {
|
||||
Chart.pluginService.notifyPlugins('beforeRender', [this]);
|
||||
|
||||
if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && this.options.animation.duration !== 0))) {
|
||||
var animation = new Chart.Animation();
|
||||
@ -422,7 +423,7 @@ module.exports = function(Chart) {
|
||||
canvas.style.width = this.chart.originalCanvasStyleWidth;
|
||||
canvas.style.height = this.chart.originalCanvasStyleHeight;
|
||||
|
||||
Chart.pluginService.notifyPlugins('destory', [this]);
|
||||
Chart.pluginService.notifyPlugins('destroy', [this]);
|
||||
|
||||
delete Chart.instances[this.id];
|
||||
},
|
||||
|
||||
@ -53,6 +53,6 @@ module.exports = function(Chart) {
|
||||
afterDraw: helpers.noop,
|
||||
|
||||
// Called during destroy
|
||||
destory: helpers.noop,
|
||||
destroy: helpers.noop,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
@ -250,7 +250,7 @@ module.exports = function(Chart) {
|
||||
datasetIndex: datasetIndex
|
||||
});
|
||||
}
|
||||
}, null, element._yScale.options.stacked);
|
||||
}, null);
|
||||
|
||||
helpers.each(this._active, function(active) {
|
||||
if (active) {
|
||||
@ -259,10 +259,9 @@ module.exports = function(Chart) {
|
||||
backgroundColor: active._view.backgroundColor
|
||||
});
|
||||
}
|
||||
}, null, element._yScale.options.stacked);
|
||||
}, null);
|
||||
|
||||
tooltipPosition = this.getAveragePosition(this._active);
|
||||
tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5);
|
||||
}
|
||||
|
||||
// Build the Text Lines
|
||||
|
||||
@ -284,7 +284,6 @@ describe('Line controller tests', function() {
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
|
||||
// Point
|
||||
x: 82,
|
||||
@ -300,7 +299,6 @@ describe('Line controller tests', function() {
|
||||
expect(chart.data.datasets[0].metaData[1]._model).toEqual({
|
||||
x: 132,
|
||||
y: 15,
|
||||
tension: 0.1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgba(0,0,0,0.1)',
|
||||
@ -317,7 +315,6 @@ describe('Line controller tests', function() {
|
||||
expect(chart.data.datasets[0].metaData[2]._model).toEqual({
|
||||
x: 182,
|
||||
y: 156,
|
||||
tension: 0.1,
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgba(0,0,0,0.1)',
|
||||
@ -339,7 +336,6 @@ describe('Line controller tests', function() {
|
||||
radius: 3,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0.1,
|
||||
|
||||
// Point
|
||||
x: 232,
|
||||
@ -391,7 +387,6 @@ describe('Line controller tests', function() {
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
x: 82,
|
||||
y: 62,
|
||||
tension: 0,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
@ -408,7 +403,6 @@ describe('Line controller tests', function() {
|
||||
expect(chart.data.datasets[0].metaData[1]._model).toEqual({
|
||||
x: 132,
|
||||
y: 15,
|
||||
tension: 0,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
@ -430,7 +424,6 @@ describe('Line controller tests', function() {
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0,
|
||||
|
||||
// Point
|
||||
x: 182,
|
||||
@ -451,7 +444,6 @@ describe('Line controller tests', function() {
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
skip: false,
|
||||
tension: 0,
|
||||
|
||||
// Point
|
||||
x: 232,
|
||||
@ -464,9 +456,174 @@ describe('Line controller tests', function() {
|
||||
controlPointNextY: 194,
|
||||
});
|
||||
|
||||
// Use the consistent name "lineTension", setting but overwriting
|
||||
// another value in "tension"
|
||||
chart.data.datasets[0].lineTension = 0.5;
|
||||
chart.data.datasets[0].tension = 0.7;
|
||||
|
||||
controller.update();
|
||||
|
||||
expect(chart.data.datasets[0].metaDataset._model).toEqual({
|
||||
backgroundColor: 'rgb(98, 98, 98)',
|
||||
borderCapStyle: 'butt',
|
||||
borderColor: 'rgb(8, 8, 8)',
|
||||
borderDash: [2, 3],
|
||||
borderDashOffset: 7,
|
||||
borderJoinStyle: 'miter',
|
||||
borderWidth: 0.55,
|
||||
fill: false,
|
||||
tension: 0.5,
|
||||
|
||||
scaleTop: 0,
|
||||
scaleBottom: 200,
|
||||
scaleZero: 156,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
x: 82,
|
||||
y: 62,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
borderWidth: 1.123,
|
||||
hitRadius: 3.3,
|
||||
skip: false,
|
||||
controlPointPreviousX: 82,
|
||||
controlPointPreviousY: 62,
|
||||
controlPointNextX: 107,
|
||||
controlPointNextY: 38.5
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[1]._model).toEqual({
|
||||
x: 132,
|
||||
y: 15,
|
||||
radius: 22,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
borderWidth: 1.123,
|
||||
hitRadius: 3.3,
|
||||
skip: false,
|
||||
controlPointPreviousX: 116.2771987579006,
|
||||
controlPointPreviousY: 0.22056683242656483,
|
||||
controlPointNextX: 166.2771987579006,
|
||||
controlPointNextY: 47.22056683242656
|
||||
});
|
||||
|
||||
// Use the consistent name "pointRadius", setting but overwriting
|
||||
// another value in "radius"
|
||||
chart.data.datasets[0].pointRadius = 250;
|
||||
chart.data.datasets[0].radius = 20;
|
||||
|
||||
controller.update();
|
||||
|
||||
expect(chart.data.datasets[0].metaDataset._model).toEqual({
|
||||
backgroundColor: 'rgb(98, 98, 98)',
|
||||
borderCapStyle: 'butt',
|
||||
borderColor: 'rgb(8, 8, 8)',
|
||||
borderDash: [2, 3],
|
||||
borderDashOffset: 7,
|
||||
borderJoinStyle: 'miter',
|
||||
borderWidth: 0.55,
|
||||
fill: false,
|
||||
tension: 0.5,
|
||||
|
||||
scaleTop: 0,
|
||||
scaleBottom: 200,
|
||||
scaleZero: 156,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
x: 82,
|
||||
y: 62,
|
||||
radius: 250,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
borderWidth: 1.123,
|
||||
hitRadius: 3.3,
|
||||
skip: false,
|
||||
controlPointPreviousX: 82,
|
||||
controlPointPreviousY: 62,
|
||||
controlPointNextX: 107,
|
||||
controlPointNextY: 38.5
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[1]._model).toEqual({
|
||||
x: 132,
|
||||
y: 15,
|
||||
radius: 250,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
borderWidth: 1.123,
|
||||
hitRadius: 3.3,
|
||||
skip: false,
|
||||
controlPointPreviousX: 116.2771987579006,
|
||||
controlPointPreviousY: 0.22056683242656483,
|
||||
controlPointNextX: 166.2771987579006,
|
||||
controlPointNextY: 47.22056683242656
|
||||
});
|
||||
|
||||
// Use the consistent name "pointHitRadius", setting but overwriting
|
||||
// another value in "hitRadius"
|
||||
chart.data.datasets[0].pointHitRadius = 123;
|
||||
chart.data.datasets[0].hitRadius = 23;
|
||||
|
||||
controller.update();
|
||||
|
||||
expect(chart.data.datasets[0].metaDataset._model).toEqual({
|
||||
backgroundColor: 'rgb(98, 98, 98)',
|
||||
borderCapStyle: 'butt',
|
||||
borderColor: 'rgb(8, 8, 8)',
|
||||
borderDash: [2, 3],
|
||||
borderDashOffset: 7,
|
||||
borderJoinStyle: 'miter',
|
||||
borderWidth: 0.55,
|
||||
fill: false,
|
||||
tension: 0.5,
|
||||
|
||||
scaleTop: 0,
|
||||
scaleBottom: 200,
|
||||
scaleZero: 156,
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
x: 82,
|
||||
y: 62,
|
||||
radius: 250,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
borderWidth: 1.123,
|
||||
hitRadius: 123,
|
||||
skip: false,
|
||||
controlPointPreviousX: 82,
|
||||
controlPointPreviousY: 62,
|
||||
controlPointNextX: 107,
|
||||
controlPointNextY: 38.5
|
||||
});
|
||||
|
||||
expect(chart.data.datasets[0].metaData[1]._model).toEqual({
|
||||
x: 132,
|
||||
y: 15,
|
||||
radius: 250,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(128, 129, 130)',
|
||||
borderColor: 'rgb(56, 57, 58)',
|
||||
borderWidth: 1.123,
|
||||
hitRadius: 123,
|
||||
skip: false,
|
||||
controlPointPreviousX: 116.2771987579006,
|
||||
controlPointPreviousY: 0.22056683242656483,
|
||||
controlPointNextX: 166.2771987579006,
|
||||
controlPointNextY: 47.22056683242656
|
||||
});
|
||||
|
||||
// Use custom styles for lines & first point
|
||||
chart.data.datasets[0].metaDataset.custom = {
|
||||
tension: 0.25,
|
||||
tension: 0.15,
|
||||
backgroundColor: 'rgb(55, 55, 54)',
|
||||
borderColor: 'rgb(8, 7, 6)',
|
||||
borderWidth: 0.3,
|
||||
@ -483,7 +640,6 @@ describe('Line controller tests', function() {
|
||||
backgroundColor: 'rgb(0, 1, 3)',
|
||||
borderColor: 'rgb(4, 6, 8)',
|
||||
borderWidth: 0.787,
|
||||
tension: 0.15,
|
||||
skip: true,
|
||||
hitRadius: 5,
|
||||
};
|
||||
@ -499,7 +655,7 @@ describe('Line controller tests', function() {
|
||||
borderJoinStyle: 'round',
|
||||
borderWidth: 0.3,
|
||||
fill: true,
|
||||
tension: 0.25,
|
||||
tension: 0.15,
|
||||
|
||||
scaleTop: 0,
|
||||
scaleBottom: 200,
|
||||
@ -509,7 +665,6 @@ describe('Line controller tests', function() {
|
||||
expect(chart.data.datasets[0].metaData[0]._model).toEqual({
|
||||
x: 82,
|
||||
y: 62,
|
||||
tension: 0.15,
|
||||
radius: 2.2,
|
||||
pointStyle: 'circle',
|
||||
backgroundColor: 'rgb(0, 1, 3)',
|
||||
@ -1281,6 +1436,17 @@ describe('Line controller tests', function() {
|
||||
expect(point._model.borderWidth).toBe(2.1);
|
||||
expect(point._model.radius).toBe(3.3);
|
||||
|
||||
// Use the consistent name "pointRadius", setting but overwriting
|
||||
// another value in "radius"
|
||||
chart.data.datasets[0].pointRadius = 250;
|
||||
chart.data.datasets[0].radius = 20;
|
||||
|
||||
controller.setHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
|
||||
expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
|
||||
expect(point._model.borderWidth).toBe(2.1);
|
||||
expect(point._model.radius).toBe(3.3);
|
||||
|
||||
// Custom style
|
||||
point.custom = {
|
||||
hoverRadius: 4.4,
|
||||
@ -1423,6 +1589,17 @@ describe('Line controller tests', function() {
|
||||
expect(point._model.borderWidth).toBe(2.1);
|
||||
expect(point._model.radius).toBe(3.3);
|
||||
|
||||
// Use the consistent name "pointRadius", setting but overwriting
|
||||
// another value in "radius"
|
||||
chart.data.datasets[0].pointRadius = 250;
|
||||
chart.data.datasets[0].radius = 20;
|
||||
|
||||
controller.removeHoverStyle(point);
|
||||
expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
|
||||
expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
|
||||
expect(point._model.borderWidth).toBe(2.1);
|
||||
expect(point._model.radius).toBe(250);
|
||||
|
||||
// Custom style
|
||||
point.custom = {
|
||||
radius: 4.4,
|
||||
|
||||
@ -63,7 +63,7 @@ describe('Test the doughnut chart default config', function() {
|
||||
}]
|
||||
}
|
||||
};
|
||||
var expectedLegend = '<ul class="mychart-legend"><li><span style="background-color:red">label1</span></li><li><span style="background-color:green">label2</span></li></ul>';
|
||||
var expectedLegend = '<ul class="mychart-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
|
||||
|
||||
expect(config.legendCallback(chart)).toBe(expectedLegend);
|
||||
});
|
||||
@ -290,4 +290,4 @@ describe('Test the polar area chart default config', function() {
|
||||
config.legend.onClick.call(scope, null, legendItem);
|
||||
expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user