Javascript Chart.js抛出：未捕获类型错误：无法读取属性'；长度'；在同一页中打印多个图表时，为未定义

Charts.js没有绘制y轴，我尝试通过json对象动态加载chartOptions和chartData，我计划通过对web api的请求接收json对象。为了演示，我包含了虚拟json对象，该对象应该绘制图形，代码运行并执行两次循环迭代，图表部分呈现（y轴未绘制），并抛出“未捕获类型错误：无法读取未定义的属性“长度””

var parsedJsonOption=JSON.parse（jsonContextOption）；
var parsedJsonData=JSON.parse（jsonContextData）；
变量名；
var图型；
函数addNewChart（i）{
var newDiv=document.createElement（“div”）；
var newCanvas=document.createElement（“画布”）；
newDiv.id=“图形-”+（i+1）；
newCanvas.id=“图表-”+（i+1）；
newDiv.width=“600px”；
newDiv.height=“400px”；
newDiv.appendChild（newCanvas）；
document.getElementById（“容器”）.appendChild（newDiv）；
}
函数randomColor（axisID）{
var-retVal；
开关（axisID）{
案例1:retVal=“rgba（255,0,0,1）”；
打破
案例2:retVal=“rgba（0255,0,1）”；
打破
案例3:retVal=“rgba（0,0255,1）”；
打破
案例4:retVal=“rgba（125125,0,1）”；
打破
案例5:retVal=“rgba（0125125,1）”；
打破
案例6:retVal=“rgba（125,0125,1）”；
打破
}
返回返回；
}
函数getInitialChartOptions（）{
var chartOption={
比例：{
xAxes：[{
scaleLabel：{
显示：假，
标签字符串：“x轴-0”
},
id:'x轴-0'
}],
雅克斯：[{
scaleLabel：{
显示：对，
标签字符串：“y轴-0”
},
id:'y轴-0'，
显示：对，
位置：'左'
}]
},
潘：{
启用：对，
模式：“x”
},
缩放：{
启用：对，
模式：“x”
}
};
返回图表选项；
}
函数getInitialChartData（）{
var图表数据={
数据集：[{
边框颜色：“rgba（255,0255,1）”，
yAxisID:'y轴-0'，
标签：“y轴-0”//图例
}]
};
返回图表数据；
}
//方法加载json中指定的选项
函数addOptionToGraph（参数元素，i，图表选项）{
chartOptions.scales.yAxes[i].position=ParameterElement.yAxisPosition；
chartOptions.scales.yAxes[i].scaleLabelString=ParameterElement.yLabel；
chartData.datasets[i].label=paramElement.name；
}
//绘制图表
功能图图表（图表ID、图表数据、图表选项、图表类型）{
//密谋
var myChart=document.getElementById（chartId.getContext（'2d'）；
var chartPlot=新图表（myChart{
类型：graphType，
数据：图表数据，
选项：图表选项
});
返回图表；
}
//方法在图表的初始化阶段加载图表选项
函数showTicksAndAxis（图表、选项）{
对于（变量i=1；i 1）{
var yaxisid=“y轴-”+轴ID；
var scaleLabelObj={display:false，labelString:yaxisid}；
var optionObj={scaleLabel:scaleLabelObj，id:yaxisid，display:false，position:'left'}；
图表选项。比例。雅克斯。推（optionObj）；
axisID++；
数据集数量--；
}
//在将数据加载到图表中之前添加选项
对于（var parametlementindex=0；parametlementindex）
  var parsedJsonOption = JSON.parse(jsonContextOption);
  var parsedJsonData = JSON.parse(jsonContextData);
  var name;
  var graphType;


  function addNewChart(i){
    var newDiv = document.createElement("div");
    var newCanvas = document.createElement("canvas");
    newDiv.id = "graph-"+(i+1);
    newCanvas.id = "Chart-"+(i+1);
    newDiv.width = "600px";
    newDiv.height = "400px";
    newDiv.appendChild(newCanvas);
    document.getElementById("container").appendChild(newDiv);
  }

  function randomColor(axisID){
    var retVal;
    switch(axisID){
    case 1: retVal = "rgba(255,0,0,1)";
        break;
    case 2: retVal = "rgba(0,255,0,1)";
        break;
    case 3: retVal = "rgba(0,0,255,1)";
        break; 
    case 4: retVal = "rgba(125,125,0,1)";
        break;
    case 5: retVal = "rgba(0,125,125,1)";
        break;
    case 6: retVal = "rgba(125,0,125,1)";
        break;
    }
    return retVal;
}

function getInitialChartOptions(){
    var chartOption = {
        scales: {
            xAxes:[{
                scaleLabel: {
                display: false,
                labelString: 'x-axis-0'
            },
                id: 'x-axis-0'
            }],
            yAxes: [{
                scaleLabel: {
                display: true,
                labelString: 'y-axis-0'
            },
                id: 'y-axis-0',
                display: true,
                position: 'left'
            }]
        },
        pan: {
            enabled: true,
            mode: 'x'
        },
        zoom: {
            enabled: true,
            mode: 'x'
        }
    };
    return chartOption;
}

function getInitialChartData(){
    var chartData = {
        datasets: [{
            borderColor: 'rgba(255,0,255,1)',
            yAxisID: 'y-axis-0',
            label: 'y-axis-0'//legend
        }]
    };
    return chartData;   
}

//method to load the options specified in the json
function addOptionToGraph(paramElement, i, chartOptions){   
    chartOptions.scales.yAxes[i].position = paramElement.yAxisPosition;
    chartOptions.scales.yAxes[i].scaleLabel.labelString = paramElement.yLabel;
    chartData.datasets[i].label = paramElement.name;
}

//plotting the chart
function plotTheChart(chartId, chartData, chartOptions, graphType){
    //plot 
    var myChart = document.getElementById(chartId).getContext('2d');
    var chartPlot = new Chart(myChart, {
        type: graphType,
        data: chartData,
        options: chartOptions
    });
    return chartPlot;
}

//method to load the chartOptions in the initialization phase of the chart
function showTicksAndAxis(chartPlot, option){
    for(var i=1;i<(option.parameterUIPropertiesCollection.length);i++){
        if(chartPlot.options.scales.yAxes[i-1].scaleLabel.labelString != option.parameterUIPropertiesCollection[i].yLabel){
            chartPlot.options.scales.yAxes[i].scaleLabel.display = true;
            chartPlot.options.scales.yAxes[i].display = true;               
        }
    }   
}


//Parameter data for the particular parameter as argument i.e. "x"
function GetParameterData(x){
    var parameterData = parsedJsonData.GraphParameterData[x];
    if (parameterData.ParameterValues != null) {
        return parameterData.ParameterValues;
    }
    return null;
}

function newDateString(days) {
    return moment().add(days, 'd');
}
var timeFormat = "DD-MM-YYYY HH:mm:ss";


//loading the data 
function setValue(j, arrayXValues, chartPlot){
    i=0;
    $.each(arrayXValues, function(key, datas) {
    key = newDateString(key);
    key = moment(key).format(timeFormat);
    chartPlot.data.labels[i] = key;
    chartPlot.data.datasets[j].data[i] = datas;
    i++;
  });
}


function loadData(chartPlot, option){
    for(var j = 0; j<chartPlot.data.datasets.length; j++){
        console.log("entered for "+j +" paramter");
        console.log(document.getElementsByTagName('body')) ;
        var arrayXValues = GetParameterData(j);
        if(arrayXValues != null){
            setValue(j, arrayXValues, chartPlot);
        }
    }
    showTicksAndAxis(chartPlot, option);//to show the hidden y-axes
    return chartPlot;
}
 for(var ChartIndex=0; ChartIndex<parsedJsonOption.length; ChartIndex++){
console.log(ChartIndex);
addNewChart(ChartIndex);

if(parsedJsonOption[ChartIndex] != null){
    var option = parsedJsonOption[ChartIndex];  
}else{
    continue;
}

name = option.graphName;



if (option.graphType == 0) {
    graphType = "line";
}

var chartOptions = getInitialChartOptions();
var chartData = getInitialChartData();

//Following is to add the chartData datasets according ton the number of parameters provided
var axisID = 1;
var numberOfParameters = parseInt(option.parameterUIPropertiesCollection.length); 
//to add the additional chartData in the chart based on the number of parameters

if(numberOfParameters > 1){
    while(numberOfParameters > 1){
        var yaxisid = "y-axis-" + axisID;
        var color = randomColor(axisID++);//increment the axisID for the next iteration
        var dataObj = {borderColor: color, yAxisID: yaxisid, label: yaxisid};
        chartData.datasets.push(dataObj);
        numberOfParameters--;   
    }   
}

//Following is to add the corresponding yaxes in the chartOptions 
axisID = 1;
var numberOfDatasets = chartData.datasets.length;

while(numberOfDatasets > 1){
    var yaxisid = "y-axis-"+axisID;
    var scaleLabelObj = {display: false, labelString: yaxisid};
    var optionObj = {scaleLabel: scaleLabelObj, id: yaxisid, display: false, postion: 'left'};
    chartOptions.scales.yAxes.push(optionObj);
    axisID++;
    numberOfDatasets--;
}

//adding the options before the data is loaded in the chart
for(var paramElementIndex=0;paramElementIndex<(option.parameterUIPropertiesCollection.length);paramElementIndex++){
    paramElement = option.parameterUIPropertiesCollection[paramElementIndex];
    addOptionToGraph(paramElement, paramElementIndex, chartOptions);
}
//console.log(i);
chartIdBasedOnIndex = ChartIndex;
var chartId = "Chart-"+(chartIdBasedOnIndex+1);


var chartPlot = plotTheChart(chartId, chartData, chartOptions, graphType);
chartPlot = loadData(chartPlot, option);
chartPlot.update();
}