Uncaught TypeError: 无法读取未定义的属性 ”

huangapple
go评论58阅读模式
英文:

Uncaught TypeError: Cannot read property '' of undefined

问题

我正在尝试基于jSon分组创建动态图表，如下所示：

var data = [{
    "France": {
        "val1": [10, 20, 30, 40]
    },
    "Croatia": {
        "val2": [50, 60, 70, 80]
    }
}];

for (var i = 0; i <= data.length; i++) {
    console.log(data[i].France);
    console.log(data[i].Croatia);

    var val = i + 1;
    var containerName = 'container' + val;

    console.log(containerName);

    Highcharts.chart(containerName, {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'France',
            data: data[i].France
        }, {
            name: 'Croatia',
            data: data[i].Croatia
        }]
    });
}

在控制台中，您可以看到数据集，但在图表中，系列抛出以下异常：

Uncaught TypeError: Cannot read property 'France' of undefined

这是因为您的for循环条件中使用了<=，应该改为<。修改后的代码如下：

for (var i = 0; i < data.length; i++) {
    // ... 剩余部分不变
}

这样应该能够解决异常问题。

英文:

I am trying to create dynamic charts based on group by jSon as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var data = [{
&quot;France&quot;: {
&quot;val1&quot;: [10, 20, 30, 40]
},
&quot;Croatia&quot;: {
&quot;val2&quot;: [50, 60, 70, 80]}
}];
for(var i = 0; i &lt;= data.length; i++) {
console.log(data[i].France);
console.log(data[i].Croatia);
var val = i + 1;
var containerName = &#39;container&#39; + val;
console.log(containerName);
Highcharts.chart(containerName, {
chart: {
type: &#39;column&#39;
},
title: {
text: &#39;Monthly Average Rainfall&#39;
},
subtitle: {
text: &#39;Source: WorldClimate.com&#39;
},
xAxis: {
categories: [
&#39;Jan&#39;,
&#39;Feb&#39;,
&#39;Mar&#39;,
&#39;Apr&#39;,
&#39;May&#39;,
&#39;Jun&#39;,
&#39;Jul&#39;,
&#39;Aug&#39;,
&#39;Sep&#39;,
&#39;Oct&#39;,
&#39;Nov&#39;,
&#39;Dec&#39;
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: &#39;Rainfall (mm)&#39;
}
},
tooltip: {
headerFormat: &#39;&lt;span style=&quot;font-size:10px&quot;&gt;{point.key}&lt;/span&gt;&lt;table&gt;&#39;,
pointFormat: &#39;&lt;tr&gt;&lt;td style=&quot;color:{series.color};padding:0&quot;&gt;{series.name}: &lt;/td&gt;&#39; +
&#39;&lt;td style=&quot;padding:0&quot;&gt;&lt;b&gt;{point.y:.1f} mm&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&#39;,
footerFormat: &#39;&lt;/table&gt;&#39;,
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: &#39;France&#39;,
data: data[i].France
}, {
name: &#39;Croatia&#39;,
data: data[i].Croatia
}]
});
}

<!-- language: lang-css -->

.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/export-data.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/accessibility.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;container1&quot;&gt;
&lt;/div&gt;&lt;br/&gt;
&lt;div id=&quot;container2&quot;&gt;
&lt;/div&gt;&lt;br /&gt;
&lt;div id=&quot;container3&quot;&gt;
&lt;/div&gt;

<!-- end snippet -->

I can show the dataset in the console but in the chart, the series throws an exception as follows:

Uncaught TypeError: Cannot read property &#39;France&#39; of undefined

Is there anything that I am doing wrong here?

答案1

得分: 2

以下是您要的代码部分的中文翻译：

series: [{
  name: 'France',
  data: d[0].France.val1
}, {
  name: 'Croatia',
  data: d[0].Croatia.val2
}]

当您使用 data: d[0].France 时，您表示数据等于 val1: [10, 20, 30, 40]。
当您使用 data: d[0].France.val1 时，您表示数据等于 [10, 20, 30, 40]。

英文:

You need to do it this way:

series: [{
name: &#39;France&#39;,
data: d[0].France.val1
}, {
name: &#39;Croatia&#39;,
data: d[0].Croatia.val2
}]

When you do data: d[0].France you say that data is equal &quot;val1&quot;: [10, 20, 30, 40] <br >
When you do data: d[0].France.val1 then you say that data is equal [10, 20, 30, 40]

Demo

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

var d = [{
&quot;France&quot;: {
&quot;val1&quot;: [10, 20, 30, 40]
},
&quot;Croatia&quot;: {
&quot;val2&quot;: [50, 60, 70, 80]
}
}];
for (var i = 0; i &lt;= d.length; i++) {
var val = i + 1;
var containerName = &#39;container&#39; + val;
Highcharts.chart(containerName, {
chart: {
type: &#39;column&#39;
},
title: {
text: &#39;Monthly Average Rainfall&#39;
},
subtitle: {
text: &#39;Source: WorldClimate.com&#39;
},
xAxis: {
categories: [
&#39;Jan&#39;,
&#39;Feb&#39;,
&#39;Mar&#39;,
&#39;Apr&#39;,
&#39;May&#39;,
&#39;Jun&#39;,
&#39;Jul&#39;,
&#39;Aug&#39;,
&#39;Sep&#39;,
&#39;Oct&#39;,
&#39;Nov&#39;,
&#39;Dec&#39;
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: &#39;Rainfall (mm)&#39;
}
},
tooltip: {
headerFormat: &#39;&lt;span style=&quot;font-size:10px&quot;&gt;{point.key}&lt;/span&gt;&lt;table&gt;&#39;,
pointFormat: &#39;&lt;tr&gt;&lt;td style=&quot;color:{series.color};padding:0&quot;&gt;{series.name}: &lt;/td&gt;&#39; +
&#39;&lt;td style=&quot;padding:0&quot;&gt;&lt;b&gt;{point.y:.1f} mm&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&#39;,
footerFormat: &#39;&lt;/table&gt;&#39;,
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: &#39;France&#39;,
data: d[0].France.val1
}, {
name: &#39;Croatia&#39;,
data: d[0].Croatia.val2
}]
});
}

<!-- language: lang-css -->

.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/export-data.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/accessibility.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;container1&quot;&gt;
&lt;/div&gt;&lt;br/&gt;
&lt;div id=&quot;container2&quot;&gt;
&lt;/div&gt;&lt;br /&gt;
&lt;div id=&quot;container3&quot;&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月6日 21:32:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/75361956.html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定