Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-19 06:36:51 +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

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;
},