I want to use chart.js
The structure is not complete, but this doesn't mater - I think. And I have a prototype structure for yAxes. These should be inserted 3x in chartDef.options.scales.yAxes but BY VALUE so I can change the three parts independently. and the ID should be inserted. But doing like in my code, all three parts are changed to the same (last) number.
For me it looks like adding by value / by reference problem.
How can I solve?
Thank you
var yaxes_prototype ={
ticks: {
autoSkip: true,
maxTicksLimit: 20,
min: -1,
max: 1,
stepSize: 0.2
}
}
var chartDef = {
type: 'line',
data: {
datasets: []
},
options: {
responsive: true,
showTooltips: true,
hoverMode: 'index',
stacked: false,
scales: {
xAxes: [],
yAxes: []
},
}
}
console.log("yaxes_prototype",yaxes_prototype)
for (var i=0 ; i<3 ; i++){
//##### OK, but BY REFERENCE
chartDef.options.scales.yAxes.push(yaxes_prototype);
// OK ,insert as newobject
chartDef.options.scales.yAxes[i]["id"]=i
// key,:val was added, but all val the same
}
console.log("chartDef",chartDef.options.scales)
The problem is you send the yaxes_prototype
exact same three times.
This snippet below may help you see if the obj1
send as param are received exactly same object (by reference), that if you change any of it, all will change.
var obj1 = {name: "foo", value: "bar"};
(function() {
if ( typeof Object.prototype.uniqueId == "undefined" ) {
var id = 0;
Object.prototype.uniqueId = function() {
if ( typeof this.__uniqueid == "undefined" ) {
this.__uniqueid = ++id;
}
return this.__uniqueid;
};
}
})();
function printId(obj) {
console.log(obj.uniqueId());
}
for(var i=0; i<3; i++)
printId(obj1);
Thus, you should copy that and resend as different variable/object in the loop:
var yaxes_prototype ={
ticks: {
autoSkip: true,
maxTicksLimit: 20,
min: -1,
max: 1,
stepSize: 0.2
}
}
console.log("yaxes_prototype",yaxes_prototype)
for (var i=0 ; i<3 ; i++){
var copyObj = {...yaxes_prototype}; // This copies the value stored in yaxes_prototype
chartDef.options.scales.yAxes.push(copyObj);
// OK ,insert as newobject
chartDef.options.scales.yAxes[i]["id"]=i
// key,:val was added, but all val the same
}