Select ile çizgi grafikleri değiştirme

Son görevinde, hedge fonu Electronic Arts'ın hisse performansını analiz etmeye yarayacak görselleştirmeler hazırlamanı istedi.

Select widget'ının ideal olduğuna karar verdin; böylece şu metrikler arasında geçiş yapabilirler: close, market_cap ve volume.

stocks veri kümesi EA için filtrelendi. Her metrik için üç şekil (close, market_cap ve volume) ve glif kümeleri (close_line, market_cap_line, volume) oluşturuldu ve senin için önceden yüklendi.

Bu egzersiz, kursun bir parçasıdır

Bokeh ile Etkileşimli Veri Görselleştirme

Kursa Göz Atın

Egzersiz talimatları

menu'yu Select() çağırarak oluştur; options argümanına sırasıyla "Close", "Market Cap" ve "Volume" içeren bir liste geçir, value'u "Close" olarak ayarla ve başlığı "Metric" yap.
Widget'ın "value" değerini callback ile bağlamak için uygun menu metodunu çağır.
show içinde layout çağırarak, widget'ı close, market_cap ve volume şekillerinin üstünde göster.

Uygulamalı etkileşimli egzersiz

Bu egzersizi bu örnek kodu tamamlayarak deneyin.

# Create menu
menu = ____
callback = CustomJS(args=dict(plot_one=close, plot_two=market_cap, plot_three=volume, line_1=close_line, line_2=market_cap_line, line_3=volume_line), code="""
plot_one.visible = true
plot_two.visible = true
plot_three.visible = true
line_1.visible = true
line_2.visible = true
line_3.visible = true
if (this.value == "Close") {plot_two.visible = false
                            plot_three.visible = false
                            line_2.visible = false
                            line_3.visible = false}
    else {plot_one.visible = false
          line_1.visible = false} 
if (this.value == "Market Cap") {plot_one.visible = false
                                 plot_three.visible = false
                                 line_1.visible = false
                                 line_3.visible = false} 
    else {plot_two.visible = false
          line_2.visible = false}
if (this.value == "Volume") {plot_one.visible = false
                             plot_two.visible = false
                             line_1.visible = false
                             line_2.visible = false}
    else {plot_three.visible = false
          line_3.visible = false}
""")

# Set up the interaction
____

# Display the layout
output_file(filename="stock_metrics.html")
____

Kodu Düzenle ve Çalıştır