Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-12 03:06:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make legend appearance consistent with chart elements (#5621)

Browse Source
This commit is contained in:
Akihiko Kusanagi
2019-05-09 21:33:19 +08:00
committed by Simon Brunel
parent f093c36574
commit feeda5d034
15 changed files with 548 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/controllers/controller.bar.js
View File

@@ -5,8 +5,6 @@ var defaults = require('../core/core.defaults');
var elements = require('../elements/index');
var helpers = require('../helpers/index');
var resolve = helpers.options.resolve;
defaults._set('bar', {
hover: {
mode: 'label'
@@ -120,6 +118,16 @@ module.exports = DatasetController.extend({
dataElementType: elements.Rectangle,
/**
* @private
*/
_dataElementOptions: [
'backgroundColor',
'borderColor',
'borderSkipped',
'borderWidth'
],
initialize: function() {
var me = this;
var meta;
@@ -147,7 +155,7 @@ module.exports = DatasetController.extend({
var me = this;
var meta = me.getMeta();
var dataset = me.getDataset();
var options = me._resolveElementOptions(rectangle, index);
var options = me._resolveDataElementOptions(rectangle, index);
rectangle._xScale = me.getScaleForId(meta.xAxisID);
rectangle._yScale = me.getScaleForId(meta.yAxisID);
@@ -372,46 +380,5 @@ module.exports = DatasetController.extend({
}
helpers.canvas.unclipArea(chart.ctx);
},
/**
* @private
*/
_resolveElementOptions: function(rectangle, index) {
var me = this;
var chart = me.chart;
var datasets = chart.data.datasets;
var dataset = datasets[me.index];
var datasetOpts = me._config;
var custom = rectangle.custom || {};
var options = chart.options.elements.rectangle;
var values = {};
var i, ilen, key;
// Scriptable options
var context = {
chart: chart,
dataIndex: index,
dataset: dataset,
datasetIndex: me.index
};
var keys = [
'backgroundColor',
'borderColor',
'borderSkipped',
'borderWidth'
];
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index);
}
return values;
}
});

58
src/controllers/controller.bubble.js
View File

@@ -47,6 +47,22 @@ module.exports = DatasetController.extend({
*/
dataElementType: elements.Point,
/**
* @private
*/
_dataElementOptions: [
'backgroundColor',
'borderColor',
'borderWidth',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
'hoverRadius',
'hitRadius',
'pointStyle',
'rotation'
],
/**
* @protected
*/
@@ -70,7 +86,7 @@ module.exports = DatasetController.extend({
var custom = point.custom || {};
var xScale = me.getScaleForId(meta.xAxisID);
var yScale = me.getScaleForId(meta.yAxisID);
var options = me._resolveElementOptions(point, index);
var options = me._resolveDataElementOptions(point, index);
var data = me.getDataset().data[index];
var dsIndex = me.index;
@@ -122,17 +138,13 @@ module.exports = DatasetController.extend({
/**
* @private
*/
_resolveElementOptions: function(point, index) {
_resolveDataElementOptions: function(point, index) {
var me = this;
var chart = me.chart;
var datasets = chart.data.datasets;
var dataset = datasets[me.index];
var datasetOpts = me._config;
var dataset = me.getDataset();
var custom = point.custom || {};
var options = chart.options.elements.point;
var data = dataset.data[index];
var values = {};
var i, ilen, key;
var data = dataset.data[index] || {};
var values = DatasetController.prototype._resolveDataElementOptions.apply(me, arguments);
// Scriptable options
var context = {
@@ -142,34 +154,12 @@ module.exports = DatasetController.extend({
datasetIndex: me.index
};
var keys = [
'backgroundColor',
'borderColor',
'borderWidth',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
'hoverRadius',
'hitRadius',
'pointStyle',
'rotation'
];
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index);
}
// Custom radius resolution
values.radius = resolve([
custom.radius,
data ? data.r : undefined,
dataset.radius,
options.radius
data.r,
me._config.radius,
chart.options.elements.point.radius
], context, index);
return values;

77
src/controllers/controller.doughnut.js
View File

@@ -5,7 +5,6 @@ var defaults = require('../core/core.defaults');
var elements = require('../elements/index');
var helpers = require('../helpers/index');
var resolve = helpers.options.resolve;
var valueOrDefault = helpers.valueOrDefault;
var PI = Math.PI;
@@ -50,20 +49,14 @@ defaults._set('doughnut', {
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc && arc.custom || {};
var arcOpts = chart.options.elements.arc;
var fill = resolve([custom.backgroundColor, ds.backgroundColor, arcOpts.backgroundColor], undefined, i);
var stroke = resolve([custom.borderColor, ds.borderColor, arcOpts.borderColor], undefined, i);
var bw = resolve([custom.borderWidth, ds.borderWidth, arcOpts.borderWidth], undefined, i);
var style = meta.controller.getStyle(i);
return {
text: label,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
lineWidth: style.borderWidth,
hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,
// Extra data used for toggling the correct item
index: i
@@ -131,6 +124,19 @@ module.exports = DatasetController.extend({
linkScales: helpers.noop,
/**
* @private
*/
_dataElementOptions: [
'backgroundColor',
'borderColor',
'borderWidth',
'borderAlign',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
],
// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
getRingIndex: function(datasetIndex) {
var ringIndex = 0;
@@ -184,7 +190,7 @@ module.exports = DatasetController.extend({
}
for (i = 0, ilen = arcs.length; i < ilen; ++i) {
arcs[i]._options = me._resolveElementOptions(arcs[i], i);
arcs[i]._options = me._resolveDataElementOptions(arcs[i], i);
}
chart.borderWidth = me.getMaxBorderWidth();
@@ -317,7 +323,7 @@ module.exports = DatasetController.extend({
arc = arcs[i];
if (controller) {
controller._configure();
options = controller._resolveElementOptions(arc, i);
options = controller._resolveDataElementOptions(arc, i);
} else {
options = arc._options;
}
@@ -351,49 +357,6 @@ module.exports = DatasetController.extend({
model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
},
/**
* @private
*/
_resolveElementOptions: function(arc, index) {
var me = this;
var chart = me.chart;
var dataset = me.getDataset();
var datasetOpts = me._config;
var custom = arc.custom || {};
var options = chart.options.elements.arc;
var values = {};
var i, ilen, key;
// Scriptable options
var context = {
chart: chart,
dataIndex: index,
dataset: dataset,
datasetIndex: me.index
};
var keys = [
'backgroundColor',
'borderColor',
'borderWidth',
'borderAlign',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
];
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index);
}
return values;
},
/**
* Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly
* @private

129
src/controllers/controller.line.js
View File

@@ -35,6 +35,38 @@ module.exports = DatasetController.extend({
dataElementType: elements.Point,
/**
* @private
*/
_datasetElementOptions: [
'backgroundColor',
'borderCapStyle',
'borderColor',
'borderDash',
'borderDashOffset',
'borderJoinStyle',
'borderWidth',
'cubicInterpolationMode',
'fill'
],
/**
* @private
*/
_dataElementOptions: {
backgroundColor: 'pointBackgroundColor',
borderColor: 'pointBorderColor',
borderWidth: 'pointBorderWidth',
hitRadius: 'pointHitRadius',
hoverBackgroundColor: 'pointHoverBackgroundColor',
hoverBorderColor: 'pointHoverBorderColor',
hoverBorderWidth: 'pointHoverBorderWidth',
hoverRadius: 'pointHoverRadius',
pointStyle: 'pointStyle',
radius: 'pointRadius',
rotation: 'pointRotation'
},
update: function(reset) {
var me = this;
var meta = me.getMeta();
@@ -61,7 +93,7 @@ module.exports = DatasetController.extend({
// Data
line._children = points;
// Model
line._model = me._resolveLineOptions(line);
line._model = me._resolveDatasetElementOptions(line);
line.pivot();
}
@@ -93,7 +125,7 @@ module.exports = DatasetController.extend({
var lineModel = meta.dataset._model;
var x, y;
var options = me._resolvePointOptions(point, index);
var options = me._resolveDataElementOptions(point, index);
x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex);
y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);
@@ -127,101 +159,20 @@ module.exports = DatasetController.extend({
/**
* @private
*/
_resolvePointOptions: function(element, index) {
_resolveDatasetElementOptions: function(element) {
var me = this;
var chart = me.chart;
var dataset = chart.data.datasets[me.index];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options.elements.point;
var values = {};
var i, ilen, key;
// Scriptable options
var context = {
chart: chart,
dataIndex: index,
dataset: dataset,
datasetIndex: me.index
};
var ELEMENT_OPTIONS = {
backgroundColor: 'pointBackgroundColor',
borderColor: 'pointBorderColor',
borderWidth: 'pointBorderWidth',
hitRadius: 'pointHitRadius',
hoverBackgroundColor: 'pointHoverBackgroundColor',
hoverBorderColor: 'pointHoverBorderColor',
hoverBorderWidth: 'pointHoverBorderWidth',
hoverRadius: 'pointHoverRadius',
pointStyle: 'pointStyle',
radius: 'pointRadius',
rotation: 'pointRotation'
};
var keys = Object.keys(ELEMENT_OPTIONS);
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[ELEMENT_OPTIONS[key]],
datasetOpts[key],
options[key]
], context, index);
}
return values;
},
/**
* @private
*/
_resolveLineOptions: function(element) {
var me = this;
var chart = me.chart;
var datasetIndex = me.index;
var dataset = chart.data.datasets[datasetIndex];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options;
var elementOptions = options.elements.line;
var values = {};
var i, ilen, key;
// Scriptable options
var context = {
chart: chart,
dataset: dataset,
datasetIndex: datasetIndex
};
var keys = [
'backgroundColor',
'borderCapStyle',
'borderColor',
'borderDash',
'borderDashOffset',
'borderJoinStyle',
'borderWidth',
'cubicInterpolationMode',
'fill'
];
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
elementOptions[key]
], context);
}
var options = me.chart.options;
var lineOptions = options.elements.line;
var values = DatasetController.prototype._resolveDatasetElementOptions.apply(me, arguments);
// The default behavior of lines is to break at null values, according
// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
// This option gives lines the ability to span gaps
values.spanGaps = valueOrDefault(datasetOpts.spanGaps, options.spanGaps);
values.tension = valueOrDefault(datasetOpts.lineTension, elementOptions.tension);
values.steppedLine = resolve([custom.steppedLine, datasetOpts.steppedLine, elementOptions.stepped]);
values.tension = valueOrDefault(datasetOpts.lineTension, lineOptions.tension);
values.steppedLine = resolve([custom.steppedLine, datasetOpts.steppedLine, lineOptions.stepped]);
return values;
},

74
src/controllers/controller.polarArea.js
View File

@@ -59,20 +59,14 @@ defaults._set('polarArea', {
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc.custom || {};
var arcOpts = chart.options.elements.arc;
var fill = resolve([custom.backgroundColor, ds.backgroundColor, arcOpts.backgroundColor], undefined, i);
var stroke = resolve([custom.borderColor, ds.borderColor, arcOpts.borderColor], undefined, i);
var bw = resolve([custom.borderWidth, ds.borderWidth, arcOpts.borderWidth], undefined, i);
var style = meta.controller.getStyle(i);
return {
text: label,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
lineWidth: style.borderWidth,
hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,
// Extra data used for toggling the correct item
index: i
@@ -116,6 +110,19 @@ module.exports = DatasetController.extend({
linkScales: helpers.noop,
/**
* @private
*/
_dataElementOptions: [
'backgroundColor',
'borderColor',
'borderWidth',
'borderAlign',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
],
update: function(reset) {
var me = this;
var dataset = me.getDataset();
@@ -138,7 +145,7 @@ module.exports = DatasetController.extend({
}
for (i = 0, ilen = arcs.length; i < ilen; ++i) {
arcs[i]._options = me._resolveElementOptions(arcs[i], i);
arcs[i]._options = me._resolveDataElementOptions(arcs[i], i);
me.updateElement(arcs[i], i, reset);
}
},
@@ -241,49 +248,6 @@ module.exports = DatasetController.extend({
model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
},
/**
* @private
*/
_resolveElementOptions: function(arc, index) {
var me = this;
var chart = me.chart;
var dataset = me.getDataset();
var datasetOpts = me._config;
var custom = arc.custom || {};
var options = chart.options.elements.arc;
var values = {};
var i, ilen, key;
// Scriptable options
var context = {
chart: chart,
dataIndex: index,
dataset: dataset,
datasetIndex: me.index
};
var keys = [
'backgroundColor',
'borderColor',
'borderWidth',
'borderAlign',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
];
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index);
}
return values;
},
/**
* @private
*/

117
src/controllers/controller.radar.js
View File

@@ -6,7 +6,6 @@ var elements = require('../elements/index');
var helpers = require('../helpers/index');
var valueOrDefault = helpers.valueOrDefault;
var resolve = helpers.options.resolve;
defaults._set('radar', {
scale: {
@@ -33,6 +32,37 @@ module.exports = DatasetController.extend({
linkScales: helpers.noop,
/**
* @private
*/
_datasetElementOptions: [
'backgroundColor',
'borderWidth',
'borderColor',
'borderCapStyle',
'borderDash',
'borderDashOffset',
'borderJoinStyle',
'fill'
],
/**
* @private
*/
_dataElementOptions: {
backgroundColor: 'pointBackgroundColor',
borderColor: 'pointBorderColor',
borderWidth: 'pointBorderWidth',
hitRadius: 'pointHitRadius',
hoverBackgroundColor: 'pointHoverBackgroundColor',
hoverBorderColor: 'pointHoverBorderColor',
hoverBorderWidth: 'pointHoverBorderWidth',
hoverRadius: 'pointHoverRadius',
pointStyle: 'pointStyle',
radius: 'pointRadius',
rotation: 'pointRotation'
},
update: function(reset) {
var me = this;
var meta = me.getMeta();
@@ -54,7 +84,7 @@ module.exports = DatasetController.extend({
line._children = points;
line._loop = true;
// Model
line._model = me._resolveLineOptions(line);
line._model = me._resolveDatasetElementOptions(line);
line.pivot();
@@ -78,7 +108,7 @@ module.exports = DatasetController.extend({
var dataset = me.getDataset();
var scale = me.chart.scale;
var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
var options = me._resolvePointOptions(point, index);
var options = me._resolveDataElementOptions(point, index);
var lineModel = me.getMeta().dataset._model;
var x = reset ? scale.xCenter : pointPosition.x;
var y = reset ? scale.yCenter : pointPosition.y;
@@ -111,86 +141,11 @@ module.exports = DatasetController.extend({
/**
* @private
*/
_resolvePointOptions: function(element, index) {
_resolveDatasetElementOptions: function() {
var me = this;
var chart = me.chart;
var dataset = chart.data.datasets[me.index];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options.elements.point;
var values = {};
var i, ilen, key;
var values = DatasetController.prototype._resolveDatasetElementOptions.apply(me, arguments);
// Scriptable options
var context = {
chart: chart,
dataIndex: index,
dataset: dataset,
datasetIndex: me.index
};
var ELEMENT_OPTIONS = {
backgroundColor: 'pointBackgroundColor',
borderColor: 'pointBorderColor',
borderWidth: 'pointBorderWidth',
hitRadius: 'pointHitRadius',
hoverBackgroundColor: 'pointHoverBackgroundColor',
hoverBorderColor: 'pointHoverBorderColor',
hoverBorderWidth: 'pointHoverBorderWidth',
hoverRadius: 'pointHoverRadius',
pointStyle: 'pointStyle',
radius: 'pointRadius',
rotation: 'pointRotation'
};
var keys = Object.keys(ELEMENT_OPTIONS);
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[ELEMENT_OPTIONS[key]],
datasetOpts[key],
options[key]
], context, index);
}
return values;
},
/**
* @private
*/
_resolveLineOptions: function(element) {
var me = this;
var chart = me.chart;
var dataset = chart.data.datasets[me.index];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options.elements.line;
var values = {};
var i, ilen, key;
var keys = [
'backgroundColor',
'borderWidth',
'borderColor',
'borderCapStyle',
'borderDash',
'borderDashOffset',
'borderJoinStyle',
'fill'
];
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
]);
}
values.tension = valueOrDefault(dataset.lineTension, options.tension);
values.tension = valueOrDefault(me._config.lineTension, me.chart.options.elements.line.tension);
return values;
},