mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Sort docs sub menus alphabetically, add line and plugin sample (#10138)
* add sample plugin for doughnut empty state * Add commented out sample, order sub cats alphabetically
This commit is contained in:
Jacco van den Berg
GitHub
parent
cb81592989
commit
7d3a1b874c
@ -134,40 +134,40 @@ module.exports = {
|
||||
{
|
||||
title: 'Bar Charts',
|
||||
children: [
|
||||
'bar/vertical',
|
||||
'bar/border-radius',
|
||||
'bar/floating',
|
||||
'bar/horizontal',
|
||||
'bar/stacked',
|
||||
'bar/stacked-groups',
|
||||
'bar/floating',
|
||||
'bar/border-radius',
|
||||
'bar/vertical',
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Line Charts',
|
||||
children: [
|
||||
'line/interpolation',
|
||||
'line/line',
|
||||
'line/multi-axis',
|
||||
'line/stepped',
|
||||
'line/interpolation',
|
||||
'line/styling',
|
||||
// 'line/point-styling',
|
||||
'line/point-styling',
|
||||
'line/segments',
|
||||
'line/stepped',
|
||||
'line/styling',
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Other charts',
|
||||
children: [
|
||||
'other-charts/bubble',
|
||||
'other-charts/scatter',
|
||||
'other-charts/scatter-multi-axis',
|
||||
'other-charts/combo-bar-line',
|
||||
'other-charts/doughnut',
|
||||
'other-charts/pie',
|
||||
'other-charts/multi-series-pie',
|
||||
'other-charts/pie',
|
||||
'other-charts/polar-area',
|
||||
'other-charts/polar-area-center-labels',
|
||||
'other-charts/radar',
|
||||
'other-charts/radar-skip-points',
|
||||
'other-charts/combo-bar-line',
|
||||
'other-charts/scatter',
|
||||
'other-charts/scatter-multi-axis',
|
||||
'other-charts/stacked-bar-line',
|
||||
]
|
||||
},
|
||||
@ -188,29 +188,29 @@ module.exports = {
|
||||
'scales/linear-min-max-suggested',
|
||||
'scales/linear-step-size',
|
||||
'scales/log',
|
||||
'scales/stacked',
|
||||
'scales/time-line',
|
||||
'scales/time-max-span',
|
||||
'scales/time-combo',
|
||||
'scales/stacked'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Scale Options',
|
||||
children: [
|
||||
'scale-options/center',
|
||||
'scale-options/grid',
|
||||
'scale-options/ticks',
|
||||
'scale-options/titles',
|
||||
'scale-options/center'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Legend',
|
||||
children: [
|
||||
'legend/position',
|
||||
'legend/title',
|
||||
'legend/point-style',
|
||||
'legend/events',
|
||||
'legend/html',
|
||||
'legend/point-style',
|
||||
'legend/position',
|
||||
'legend/title',
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -227,11 +227,11 @@ module.exports = {
|
||||
}, {
|
||||
title: 'Tooltip',
|
||||
children: [
|
||||
'tooltip/position',
|
||||
'tooltip/interactions',
|
||||
'tooltip/point-style',
|
||||
'tooltip/content',
|
||||
'tooltip/html',
|
||||
'tooltip/interactions',
|
||||
'tooltip/point-style',
|
||||
'tooltip/position',
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -239,8 +239,8 @@ module.exports = {
|
||||
children: [
|
||||
'scriptable/bar',
|
||||
'scriptable/bubble',
|
||||
'scriptable/pie',
|
||||
'scriptable/line',
|
||||
'scriptable/pie',
|
||||
'scriptable/polar',
|
||||
'scriptable/radar',
|
||||
]
|
||||
@ -259,18 +259,19 @@ module.exports = {
|
||||
title: 'Advanced',
|
||||
children: [
|
||||
'advanced/data-decimation',
|
||||
'advanced/progress-bar',
|
||||
'advanced/radial-gradient',
|
||||
'advanced/linear-gradient',
|
||||
'advanced/programmatic-events',
|
||||
'advanced/derived-axis-type',
|
||||
'advanced/derived-chart-type',
|
||||
'advanced/linear-gradient',
|
||||
'advanced/programmatic-events',
|
||||
'advanced/progress-bar',
|
||||
'advanced/radial-gradient',
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Plugins',
|
||||
children: [
|
||||
'plugins/chart-area-border',
|
||||
'plugins/doughnut-empty-state',
|
||||
'plugins/quadrants',
|
||||
]
|
||||
},
|
||||
@ -291,11 +292,11 @@ module.exports = {
|
||||
{
|
||||
title: 'General',
|
||||
children: [
|
||||
'general/data-structures',
|
||||
'general/accessibility',
|
||||
'general/options',
|
||||
'general/colors',
|
||||
'general/data-structures',
|
||||
'general/fonts',
|
||||
'general/options',
|
||||
'general/padding',
|
||||
'general/performance'
|
||||
]
|
||||
@ -304,33 +305,33 @@ module.exports = {
|
||||
title: 'Configuration',
|
||||
children: [
|
||||
'configuration/',
|
||||
'configuration/responsive',
|
||||
'configuration/device-pixel-ratio',
|
||||
'configuration/locale',
|
||||
'configuration/interactions',
|
||||
'configuration/canvas-background',
|
||||
'configuration/animations',
|
||||
'configuration/canvas-background',
|
||||
'configuration/decimation',
|
||||
'configuration/device-pixel-ratio',
|
||||
'configuration/elements',
|
||||
'configuration/interactions',
|
||||
'configuration/layout',
|
||||
'configuration/legend',
|
||||
'configuration/title',
|
||||
'configuration/locale',
|
||||
'configuration/responsive',
|
||||
'configuration/subtitle',
|
||||
'configuration/title',
|
||||
'configuration/tooltip',
|
||||
'configuration/elements',
|
||||
'configuration/decimation'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Chart Types',
|
||||
children: [
|
||||
'charts/line',
|
||||
'charts/bar',
|
||||
'charts/radar',
|
||||
'charts/doughnut',
|
||||
'charts/polar',
|
||||
'charts/bubble',
|
||||
'charts/scatter',
|
||||
'charts/area',
|
||||
'charts/mixed'
|
||||
'charts/bar',
|
||||
'charts/bubble',
|
||||
'charts/doughnut',
|
||||
'charts/line',
|
||||
'charts/mixed',
|
||||
'charts/polar',
|
||||
'charts/radar',
|
||||
'charts/scatter',
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -364,13 +365,13 @@ module.exports = {
|
||||
children: [
|
||||
'developers/',
|
||||
'developers/api',
|
||||
'developers/axes',
|
||||
'developers/charts',
|
||||
'developers/contributing',
|
||||
'developers/plugins',
|
||||
'developers/publishing',
|
||||
['api/', 'TypeDoc'],
|
||||
'developers/updates',
|
||||
'developers/plugins',
|
||||
'developers/charts',
|
||||
'developers/axes',
|
||||
'developers/contributing',
|
||||
'developers/publishing'
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
136
docs/samples/line/point-styling.md
Normal file
136
docs/samples/line/point-styling.md
Normal file
@ -0,0 +1,136 @@
|
||||
# Point Styling
|
||||
|
||||
```js chart-editor
|
||||
// <block:actions:2>
|
||||
const actions = [
|
||||
{
|
||||
name: 'pointStyle: circle (default)',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'cirlce';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: cross',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'cross';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: crossRot',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'crossRot';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: dash',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'dash';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: line',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'line';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: rect',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'rect';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: rectRounded',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'rectRounded';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: rectRot',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'rectRot';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: star',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'star';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'pointStyle: triangle',
|
||||
handler: (chart) => {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.pointStyle = 'triangle';
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
}
|
||||
];
|
||||
// </block:actions>
|
||||
|
||||
// <block:setup:1>
|
||||
const data = {
|
||||
labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Dataset',
|
||||
data: Utils.numbers({count: 6, min: -100, max: 100}),
|
||||
borderColor: Utils.CHART_COLORS.red,
|
||||
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
|
||||
pointStyle: 'circle',
|
||||
pointRadius: 10,
|
||||
pointHoverRadius: 15
|
||||
}
|
||||
]
|
||||
};
|
||||
// </block:setup>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: (ctx) => 'Point Style: ' + ctx.chart.data.datasets[0].pointStyle,
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
module.exports = {
|
||||
actions: actions,
|
||||
config: config,
|
||||
};
|
||||
```
|
||||
77
docs/samples/plugins/doughnut-empty-state.md
Normal file
77
docs/samples/plugins/doughnut-empty-state.md
Normal file
@ -0,0 +1,77 @@
|
||||
# Doughnut Empty State
|
||||
|
||||
```js chart-editor
|
||||
// <block:data:2>
|
||||
const data = {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
};
|
||||
// </block:data>
|
||||
|
||||
// <block:plugin:1>
|
||||
const plugin = {
|
||||
id: 'emptyDoughnut',
|
||||
afterDraw(chart, args, options) {
|
||||
const {datasets} = chart.data;
|
||||
const {color, width, radiusDecrease} = options;
|
||||
let hasData = false;
|
||||
|
||||
for (let i = 0; i < datasets.length; i += 1) {
|
||||
const dataset = datasets[i];
|
||||
hasData |= dataset.data.length > 0;
|
||||
}
|
||||
|
||||
if (!hasData) {
|
||||
const {chartArea: {left, top, right, bottom}, ctx} = chart;
|
||||
const centerX = (left + right) / 2;
|
||||
const centerY = (top + bottom) / 2;
|
||||
const r = Math.min(right - left, bottom - top) / 2;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = width || 2;
|
||||
ctx.strokeStyle = color || 'rgba(255, 128, 0, 0.5)';
|
||||
ctx.arc(centerX, centerY, (r - radiusDecrease || 0), 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
};
|
||||
// </block:plugin>
|
||||
|
||||
// <block:config:0>
|
||||
const config = {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
options: {
|
||||
plugins: {
|
||||
emptyDoughnut: {
|
||||
color: 'rgba(255, 128, 0, 0.5)',
|
||||
width: 2,
|
||||
radiusDecrease: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [plugin]
|
||||
};
|
||||
// </block:config>
|
||||
|
||||
const actions = [
|
||||
{
|
||||
name: 'Randomize',
|
||||
handler(chart) {
|
||||
chart.data.datasets.forEach(dataset => {
|
||||
dataset.data = Utils.points(NUMBER_CFG);
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
actions,
|
||||
config,
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user