mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Add clip option to scale configuration to allow unclipped scales (#11404)
* Add clip option to scale configuration to allow unclipped scales * add images * fix cc * change name of function
This commit is contained in:
parent
095a9849f4
commit
79f1a0a9e8
@ -5,6 +5,7 @@ Namespace: `options.scales[scaleId]`
|
||||
| Name | Type | Default | Description
|
||||
| ---- | ---- | ------- | -----------
|
||||
| `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
|
||||
| `clip` | `boolean` | `true` | If true, clip the dataset drawing against the size of the scale instead of chart area
|
||||
| `position` | `string` \| `object` | | Position of the axis. [more...](./index.md#axis-position)
|
||||
| `stack` | `string` | | Stack group. Axes at the same `position` with same `stack` are stacked.
|
||||
| `stackWeight` | `number` | 1 | Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.
|
||||
|
@ -101,16 +101,21 @@ function determineLastEvent(e, lastEvent, inChartArea, isClick) {
|
||||
return e;
|
||||
}
|
||||
|
||||
function getDatasetArea(meta) {
|
||||
function getSizeForArea(scale, chartArea, field) {
|
||||
return scale.options.clip ? scale[field] : chartArea[field];
|
||||
}
|
||||
|
||||
function getDatasetArea(meta, chartArea) {
|
||||
const {xScale, yScale} = meta;
|
||||
if (xScale && yScale) {
|
||||
return {
|
||||
left: xScale.left,
|
||||
right: xScale.right,
|
||||
top: yScale.top,
|
||||
bottom: yScale.bottom
|
||||
left: getSizeForArea(xScale, chartArea, 'left'),
|
||||
right: getSizeForArea(xScale, chartArea, 'right'),
|
||||
top: getSizeForArea(yScale, chartArea, 'top'),
|
||||
bottom: getSizeForArea(yScale, chartArea, 'bottom')
|
||||
};
|
||||
}
|
||||
return chartArea;
|
||||
}
|
||||
|
||||
class Chart {
|
||||
@ -796,7 +801,7 @@ class Chart {
|
||||
const ctx = this.ctx;
|
||||
const clip = meta._clip;
|
||||
const useClip = !clip.disabled;
|
||||
const area = getDatasetArea(meta) || this.chartArea;
|
||||
const area = getDatasetArea(meta, this.chartArea);
|
||||
const args = {
|
||||
meta,
|
||||
index: meta.index,
|
||||
|
@ -16,6 +16,8 @@ export function applyScaleDefaults(defaults) {
|
||||
*/
|
||||
bounds: 'ticks',
|
||||
|
||||
clip: true,
|
||||
|
||||
/**
|
||||
* Addition grace added to max and reduced from min data value.
|
||||
* @since 3.0.0
|
||||
|
5
src/types/index.d.ts
vendored
5
src/types/index.d.ts
vendored
@ -1171,6 +1171,11 @@ export interface CoreScaleOptions {
|
||||
* @default false
|
||||
*/
|
||||
reverse: boolean;
|
||||
/**
|
||||
* Clip the dataset drawing against the size of the scale instead of chart area.
|
||||
* @default true
|
||||
*/
|
||||
clip: boolean;
|
||||
/**
|
||||
* The weight used to sort the axis. Higher weights are further away from the chart area.
|
||||
* @default true
|
||||
|
115
test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.js
vendored
Normal file
115
test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.js
vendored
Normal file
@ -0,0 +1,115 @@
|
||||
module.exports = {
|
||||
config: {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [
|
||||
{data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], borderColor: 'red'},
|
||||
{data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'},
|
||||
{data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'},
|
||||
],
|
||||
labels: ['tick1', 'tick2', 'tick3']
|
||||
},
|
||||
options: {
|
||||
plugins: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
position: 'bottom',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
bounds: 'data',
|
||||
border: {
|
||||
color: 'red'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0,
|
||||
count: 3
|
||||
},
|
||||
max: 7
|
||||
},
|
||||
x1: {
|
||||
type: 'linear',
|
||||
position: 'bottom',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
bounds: 'data',
|
||||
border: {
|
||||
color: 'green'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0,
|
||||
count: 3
|
||||
},
|
||||
max: 7
|
||||
},
|
||||
x2: {
|
||||
type: 'linear',
|
||||
position: 'bottom',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
bounds: 'data',
|
||||
border: {
|
||||
color: 'blue'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0,
|
||||
count: 3
|
||||
},
|
||||
max: 7
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
border: {
|
||||
color: 'red'
|
||||
},
|
||||
ticks: {
|
||||
precision: 0
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
border: {
|
||||
color: 'green'
|
||||
},
|
||||
ticks: {
|
||||
precision: 0
|
||||
}
|
||||
},
|
||||
y2: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
border: {
|
||||
color: 'blue',
|
||||
},
|
||||
ticks: {
|
||||
precision: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
options: {
|
||||
spriteText: true,
|
||||
canvas: {
|
||||
height: 384,
|
||||
width: 384
|
||||
}
|
||||
}
|
||||
};
|
BIN
test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png
vendored
Normal file
BIN
test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
115
test/fixtures/core.layouts/stacked-boxes-max-without-clip.js
vendored
Normal file
115
test/fixtures/core.layouts/stacked-boxes-max-without-clip.js
vendored
Normal file
@ -0,0 +1,115 @@
|
||||
module.exports = {
|
||||
config: {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [
|
||||
{data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], borderColor: 'red'},
|
||||
{data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'},
|
||||
{data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'},
|
||||
],
|
||||
labels: ['tick1', 'tick2', 'tick3']
|
||||
},
|
||||
options: {
|
||||
plugins: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
position: 'bottom',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
bounds: 'data',
|
||||
border: {
|
||||
color: 'red'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0,
|
||||
count: 3
|
||||
}
|
||||
},
|
||||
x1: {
|
||||
type: 'linear',
|
||||
position: 'bottom',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
bounds: 'data',
|
||||
border: {
|
||||
color: 'green'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0,
|
||||
count: 3
|
||||
}
|
||||
},
|
||||
x2: {
|
||||
type: 'linear',
|
||||
position: 'bottom',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
bounds: 'data',
|
||||
border: {
|
||||
color: 'blue'
|
||||
},
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0,
|
||||
count: 3
|
||||
}
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
border: {
|
||||
color: 'red'
|
||||
},
|
||||
ticks: {
|
||||
precision: 0
|
||||
},
|
||||
max: 7
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
border: {
|
||||
color: 'green'
|
||||
},
|
||||
ticks: {
|
||||
precision: 0
|
||||
},
|
||||
max: 7
|
||||
},
|
||||
y2: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
stack: '1',
|
||||
offset: true,
|
||||
clip: false,
|
||||
border: {
|
||||
color: 'blue',
|
||||
},
|
||||
ticks: {
|
||||
precision: 0
|
||||
},
|
||||
max: 7
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
options: {
|
||||
spriteText: true,
|
||||
canvas: {
|
||||
height: 384,
|
||||
width: 384
|
||||
}
|
||||
}
|
||||
};
|
BIN
test/fixtures/core.layouts/stacked-boxes-max-without-clip.png
vendored
Normal file
BIN
test/fixtures/core.layouts/stacked-boxes-max-without-clip.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in New Issue
Block a user