Javascript 在html页面底部显示条形图失败

我正在尝试加载geojson数据，我将其硬编码为名为sample的变量。现在我想在单击每个功能后显示一个图表。下面是我的代码。但它给出了错误消息：功能未定义

var map = L.map('map').setView([55, 3], 5);

 L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
     subdomains: ['a','b','c']


}).addTo( map );


var trees = L.geoJson(Sample).addTo(map);

trees.on('click', function ( evt) {
        feature = evt.layer.feature;
        $("#chart").empty();

 var chart = c3.generate({
     data: {
         names: {
             data1: 'a',
             data2: 'b',
             data3: 'c',
             data4: 'd',
             data5: 'e'
         },
         // just taken some RANDOM fields to demonstrate
         // how to draw the chart
         columns: [
             ['data1',
             feature.properties.a],
             ['data2',
             feature.properties.b],
             ['data3',
             feature.properties.c],
             ['data4',
             feature.properties.d],
             ['data5',
             feature.properties.e]
         ],
         types: {
             data1: 'bar',
             data2: 'bar',
             data3: 'bar',
             data4: 'bar',
             data5: 'bar'
         }
     },
     axis: {
         rotated: false,
         x: {
             label: {
                 text: 'Your Topics',
                 position: 'outer-middle'

             }
         },
         y: {
             label: {
                 text: 'Your_Values',
                 position: 'outer-center'
             }
         }

     }
 });

var-map=L.map（'map'）.setView（[55,3]，5）；
L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；”，
子域：['a'，'b'，'c']
}).addTo（地图）；
var trees=L.geoJson（示例）.addTo（映射）；
树。打开（'click'，函数（evt）{
特征=evt.layer.feature；
$（“#图表”）.empty（）；
var图表=c3.0({
数据：{
姓名：{
数据1:‘a’，
数据2：‘b’，
数据3：‘c’，
数据4：‘d’，
数据5:‘e’
},
//只是用一些随机场来演示
//如何绘制图表
栏目：[
['data1'，
feature.properties.a]，
['data2'，
feature.properties.b]，
['data3'，
feature.properties.c]，
['data4'，
feature.properties.d]，
['data5'，
特色.属性.e]
],
类型：{
数据1:'条形'，
数据2:'酒吧'，
数据3:'酒吧'，
数据4:'酒吧'，
数据5：“酒吧”
}
},
轴线：{
旋转：假，
x:{
标签：{
文本：“您的主题”，
位置：'外侧中间'
}
},
y:{
标签：{
文本：“你的价值观”，
位置：'外中心'
}
}
}
});

---

}))

树中的事件层单击处理程序没有功能。应将单击处理程序添加到每个层：

var trees = L.geoJson(Sample, {
  onEachFeature: function onEachFeature(feature, layer) {
    layer.on('clicked feature', function(evt) {
      console.log('feature=', feature);
      $("#chart").empty(); 
      // generate chart here using feature
      // var chart = c3.generate({...});
    });
  }
}).addTo(map);

---

你能安装JSFIDLE吗？这是正确的链接抱歉再次询问，但是有没有比硬编码geojson数据更好的加载geojson数据的方法？是的，您可以通过AJAX请求加载它，并在加载完成后绘制地图/图表；细节超出了评论的范围