顯示條形圖失敗

Question

我試圖加載GeoJSON的數據，這是我硬編碼爲可變稱爲樣品。現在我想在點擊每個功能後顯示一個圖表。以下是我的代碼。但是它給出了ErrorMessage：功能是未定義的。

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' 
      } 
     } 

    } 
}); 

}）;

Answer 1

在trees單擊處理程序沒有的功能，事件層。您應該單擊處理程序添加到每個層：

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);