Estoy usando Chart.js, varios gráficos de líneas tienen el mismo estilo de datos diferentes. Así que quiero crear una fuente para los estilos llamada _props e incluirla en los gráficos.
this._props = { icons: ['chevron-bottom', 'chevron-top', 'chevron-top', 'chevron-top', 'chevron-bottom'], borderColor: Globals.primary, pointBackgroundColor: Globals.primary, pointBorderColor: Globals.primary, pointHoverBackgroundColor: Globals.foreground, pointHoverBorderColor: Globals.primary, borderWidth: 2, pointRadius: 2, pointBorderWidth: 2, pointHoverBorderWidth: 2, pointHoverRadius: 5, fill: false, }; this._smallLineChart1 = ChartsExtend.SmallLineChart('lineChart1', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], datasets: [ { label: 'BTC / USD', data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2], this._props, // the elements should be in here not inside another array or object. }, ], });Quiero que sea así:
this._smallLineChart1 = ChartsExtend.SmallLineChart('lineChart1', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], datasets: [ { label: 'BTC / USD', data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2], icons: ['chevron-bottom', 'chevron-top', 'chevron-top', 'chevron-top', 'chevron-bottom'], borderColor: Globals.primary, pointBackgroundColor: Globals.primary, pointBorderColor: Globals.primary, pointHoverBackgroundColor: Globals.foreground, pointHoverBorderColor: Globals.primary, borderWidth: 2, pointRadius: 2, pointBorderWidth: 2, pointHoverBorderWidth: 2, pointHoverRadius: 5, fill: false, }, ], });nota: las funciones están en una clase
Puede usar el operador de propagación ( ... ) para agregar sus accesorios dentro del conjunto de datos. Luego puede combinar lo que ya tiene almacenado con los accesorios adicionales.
this._smallLineChart1.datasets[0] = {...this._smallLineChart1.datasets[0],...this._props};Aquí hay un ejemplo usando una clase de prueba
class Test { _props; _smallLineChart1; constructor(){ this._props = { someProp:'', borderWidth: 2, pointRadius: 2, pointBorderWidth: 2, pointHoverBorderWidth: 2, pointHoverRadius: 5, fill: false, }; this._smallLineChart1 = { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], datasets: [ { label: 'BTC / USD', data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2], }, ], }; this._smallLineChart1.datasets[0] = {...this._smallLineChart1.datasets[0],...this._props}; console.log(this) } } new Test();