htmlページの下部に棒グラフが表示されない

Question

geojsonデータを読み込もうとしていますが、これはsampleという変数にハードコードされています。今度は、各フィーチャーをクリックした後にグラフを表示したいと思います。以下は私のコードです。しかしそれは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);