Flutter x Graph

flutter_charts について、まとめた LT です

第2回 FlutterGakkai https://fluttergakkai.connpass.com/event/248999/ で登壇しました

Transcript

1. Flutter x Graph
   ୈ2ճ FlutterG
   a
   kk
   a
   i
   
   
   4geru
   

   View Slide

2. ࣗݾ঺հ
   ໊લɿ͛͠Δ(@_4geru)
   
   
   ձࣾɿϚωʔϑΥϫʔυ
   
   
   ࢓ࣄɿWebΤϯδχΞ(ϑϩϯτ / όοΫ)
   
   
   Flutterྺɿ5ϲ݄(2022/03~)
   
   
   झຯɿΧϝϥ / μΠϏϯά
   

   View Slide

3. ࣗݾ঺հ
   

   View Slide

4. ࠓճ࿩͢͜ͱ
   💣 charts_
   f
   lutter ʹ͍ͭͯ
   
   
   💣 αϯϓϧίʔυ class ߏ੒
   
   
   💣 ๮άϥϑ / ԁάϥϑ
   
   
   💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
   
   
   💣 ෳ߹άϥϑ
   

   View Slide

5. ࠓճ࿩͢͜ͱ
   🔥 charts_
   f
   lutter ʹ͍ͭͯ
   
   
   💣 αϯϓϧίʔυ class ߏ੒
   
   
   💣 ๮άϥϑ / ԁάϥϑ
   
   
   💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
   
   
   💣 ෳ߹άϥϑ
   

   View Slide

6. View Slide

7. ɾGoogle ͕ఏڙ͍ͯ͠Δ άϥϑදࣔͷϥΠϒϥϦ
   
   
   ɹɾhttps://github.com/google/charts
   
   
   ɾެࣜͷαϯϓϧίʔυ͕ॆ࣮͍ͯ͠Δ
   

   ɹɾhttps://google.github.io/charts/
   f
   lutter/gallery.html
   chart_
   f
   lutter ʹ͍ͭͯ
   

   View Slide

8. ެࣜͷαϯϓϧ
   
   
   ͕ਖ਼ٛ
   

   View Slide

9. αϯϓϧίʔυʹ͍ͭͯ
   

   View Slide

10. ɾcharts_
    f
    lutter/example/lib ҎԼʹ
    

    αϯϓϧίʔυ͕͋Γ·͢
    
    
    ɾ๮άϥϑΛಡΈ·͢
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
    

    View Slide

11. ɾݺͼग़͠
    
    
    https://github.com/google/charts/blob/master/charts_
    f
    lutter/example/lib/bar_chart/
    bar_gallery.dart#L40-L45
    
    
    SampleBarChart Ͱ͸ɺfactory Λ࢖ͬͯද͍ࣔͯ͠Δ
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
    

    View Slide

12. ɾσʔλ࡞੒
    
    
    https://github.com/google/charts/blob/master
    

    /charts_
    f
    lutter/example/lib/bar_chart/simple.dart
    

    #L42-L66
    
    
    chart.Series Λฦ͍ͯ͠Δ
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
    

    View Slide

13. ɾModel class
    
    
    https://github.com/google/charts/blob/master/charts_
    f
    lutter/example/lib/bar_chart/simple.dart#L99-
    L104
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
    

    View Slide

14. ɾUIදࣔ
    
    
    https://github.com/google/charts/blob/master/charts_
    f
    lutter/example/lib/bar_chart/simple.dart#L99-L104
    
    
    άϥϑʹΑͬͯɺcharts.BarChart / PieChart ͳͲΛઃఆ͢Δ
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
    

    View Slide

15. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ
    
    
    🔥 άϥϑΛ࡞Δ class ߏ੒
    
    
    💣 ๮άϥϑ / ԁάϥϑ
    
    
    💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    
    
    💣 ෳ߹άϥϑ
    

    View Slide

16. ɾొ৔ਓ෺
    
    
    ɾParent View classɿ৘ใΛ؅ཧ͢Δ
    
    
    ɾModel classɿσʔλΛ؅ཧ͢Δ
    
    
    ɾChart View classɿάϥϑΛ؅ཧ͢Δ
    ͔͜͜Β࿩͢ίʔυʹ͍ͭͯ
    

    View Slide

17. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ
    
    
    🔥 αϯϓϧίʔυ class ߏ੒
    
    
    🔥 ๮άϥϑ / ԁάϥϑ
    
    
    💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    
    
    💣 ෳ߹άϥϑ
    

    View Slide

18. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾChart View class
    
    
    ɾModel class
    ๮άϥϑͱԁάϥϑ
    

    View Slide

19. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾσʔλͷ࡞੒
    
    
    ɾ഑৭ͷઃఆ
    
    
    ɾModel class
    
    
    ɾChart View class
    ๮άϥϑͱԁάϥϑ
    

    View Slide

20. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾModel class
    
    
    ɾ҆৺ͷ Model class
    
    
    ɾChart View class
    ๮άϥϑͱԁάϥϑ
    

    View Slide

21. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾModel class
    
    
    ɾChart View class
    
    
    ɾbuild Ͱ series ͷॳظԽ
    
    
    ɾdata͔ΒσʔλΛ࡞Δؔ਺͕͋Δ
    ๮άϥϑͱԁάϥϑ
    

    View Slide

22. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾModel class
    
    
    ɾChart View class
    
    
    ɾ๮άϥϑͱԁάϥϑΛදࣔ͢Δ
    
    
    ɾ๮άϥϑͷॎԣ͸ vertical: true / false
    ๮άϥϑͱԁάϥϑ
    

    View Slide

23. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾModel class
    
    
    ɾChart View class
    
    
    ɾseries Λ૿΍͢
    ๮άϥϑͱԁάϥϑ
    

    View Slide

24. Series Λ૿΍͢
    ɾදࣔσʔλΛ૿΍͢
    
    
    ɾԁάϥϑҎ֎͸ Series Λ૿ͤΔ
    
    
    ɾੵΈ্͛๮άϥϑ͕දݱͰ͖Δ
    

    View Slide

25. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ
    
    
    🔥 αϯϓϧίʔυ class ߏ੒
    
    
    🔥 ๮άϥϑ / ԁάϥϑ
    
    
    🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    
    
    💣 ෳ߹άϥϑ
    

    View Slide

26. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾModel class
    
    
    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    

    View Slide

27. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾંΕઢάϥϑͱλΠϜϥΠϯνϟʔτͷ
    

    σʔλ͕ҧ͏
    
    
    ɾModel class
    
    
    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    

    View Slide

28. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾkey / date Ͱҧ͏ num / DateTime ܕͰѻ͏
    
    
    ɾModel class
    
    
    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    

    View Slide

29. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾModel class
    
    
    ɾંΕઢάϥϑ / λΠϜϥΠϯνϟʔτ
    

    (int / DateTime)Ͱσʔλܕ͕ҧ͏
    
    
    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    

    View Slide

30. ɾొ৔ਓ෺
    
    
    ɾParent View class
    
    
    ɾModel class
    
    
    ɾChart View class
    
    
    ɾLineChart / TimeSeriesChart ͰมΘΔ
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    

    View Slide

31. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ
    
    
    🔥 αϯϓϧίʔυ class ߏ੒
    
    
    🔥 ๮άϥϑ / ԁάϥϑ
    
    
    🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
    
    
    🔥 ෳ߹άϥϑ
    

    View Slide

32. ෳ߹άϥϑʢαϯϓϧίʔυʣ
    

    View Slide

33. ɾϝΠϯʹΑΓάϥϑ͕มΘΔ
    
    
    ɾOrdinalComboChart ͸ List>
    
    
    ɾ NumericComboChart ͸ List>
    
    
    ෳ߹άϥϑ
    Build defaultRenderer customSeriesRenderer
    s
    ordinal_bar_line OrdinalComboChart BarRendererCon
    f
    ig LineRendererCon
    f
    ig
    numeric_line_bar NumericComboChart LineRendererCon
    f
    ig BarRendererCon
    f
    ig
    numeric_line_point NumericComboChart LineRendererCon
    f
    ig PointRendererCon
    f
    ig
    date_time_line_point TimeSeriesChart LineRendererCon
    f
    ig PointRendererCon
    f
    ig
    scatter_plot_line ScatterPlotChart PointRendererCon
    f
    ig LineRendererCon
    f
    ig
    

    View Slide

34. ɾઃఆํ๏
    
    
    1. customSeriesRenders ͰΧελϜදࣔ͢Δ
    

    chart ͷ type Λઃఆ͢Δ
    
    
    2. customRenderId ͰΧελϜද͍ࣔͨ͠ID
    

    Λࢦఆ͢Δ
    ෳ߹άϥϑ
    

    View Slide

35. ෳ߹άϥϑ
    ɾઃఆํ๏
    
    
    1. customSeriesRenders ͰΧελϜදࣔ͢Δ
    

    chart ͷ type Λઃఆ͢Δ
    
    
    2. customRenderId ͰΧελϜද͍ࣔͨ͠ID
    

    Λࢦఆ͢Δ
    
    
    3. ը૾Λඳը͢Δ Series ʹ setAttribute Ͱ
    

    ΧελϜද͍ࣔͨ͠ID Λࢦఆ͢Δ
    

    View Slide

36. ɾ໨੝(Axes) / ຌྫ(Legends) / ڍಈ(Behaviors) / ΞΫηγϏϦςΟ(a11y) / ଞݴޠ(i18n) ͳͲͷྫ΋
    ͋Γ·͢ɻ
    
    
    ɾchart_
    f
    lutter ͸ Google ͷϥΠϒϥϦͰ͕͢ɺ
    f
    l_chart ͳͲͷผͷύοέʔδ΋͋Γ·͢ɻͥͻ
    ͞·͟·ͳϥΠϒϥϦͰ༡ΜͰ͍ͩ͘͞ɻ
    
    
    ɾOSSͳͷͰɺ·ͩ଍Γͳ͍෦෼౳͋Ε͹ɺͲΜͲΜ contribute νϟϨϯδ͠·͠ΐ͏ɻ
    
    
    ࠷ޙʹ
    

    View Slide

37. Let’s enjoy your
    
    
    hacking life.
    

    View Slide