Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter x Graph

Flutter x Graph

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

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

4geru sakisaka

July 22, 2022
Tweet

More Decks by 4geru sakisaka

Other Decks in Technology

Transcript

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

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

  3. ࣗݾ঺հ

  4. ࠓճ࿩͢͜ͱ 💣 charts_ f lutter ʹ͍ͭͯ 💣 αϯϓϧίʔυ class ߏ੒

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

    💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
  6. None
  7. ɾGoogle ͕ఏڙ͍ͯ͠Δ άϥϑදࣔͷϥΠϒϥϦ ɹɾhttps://github.com/google/charts ɾެࣜͷαϯϓϧίʔυ͕ॆ࣮͍ͯ͠Δ 
 ɹɾhttps://google.github.io/charts/ f lutter/gallery.html chart_

    f lutter ʹ͍ͭͯ
  8. ެࣜͷαϯϓϧ ͕ਖ਼ٛ

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

  10. ɾcharts_ f lutter/example/lib ҎԼʹ 
 αϯϓϧίʔυ͕͋Γ·͢ ɾ๮άϥϑΛಡΈ·͢ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

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

  12. ɾσʔλ࡞੒ https://github.com/google/charts/blob/master 
 /charts_ f lutter/example/lib/bar_chart/simple.dart 
 #L42-L66 chart.Series<Model, String>

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

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

  15. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 άϥϑΛ࡞Δ class ߏ੒

    💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
  16. ɾొ৔ਓ෺ ɾParent View classɿ৘ใΛ؅ཧ͢Δ ɾModel classɿσʔλΛ؅ཧ͢Δ ɾChart View classɿάϥϑΛ؅ཧ͢Δ ͔͜͜Β࿩͢ίʔυʹ͍ͭͯ

  17. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒

    🔥 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
  18. ɾొ৔ਓ෺ ɾParent View class ɾChart View class ɾModel class ๮άϥϑͱԁάϥϑ

  19. ɾొ৔ਓ෺ ɾParent View class ɾσʔλͷ࡞੒ ɾ഑৭ͷઃఆ ɾModel class ɾChart View

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

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

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

    ɾ๮άϥϑͷॎԣ͸ vertical: true / false ๮άϥϑͱԁάϥϑ
  23. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾseries

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

  25. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒

    🔥 ๮άϥϑ / ԁάϥϑ 🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
  26. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ંΕઢάϥϑ

    vs λΠϜϥΠϯνϟʔτ
  27. ɾొ৔ਓ෺ ɾParent View class ɾંΕઢάϥϑͱλΠϜϥΠϯνϟʔτͷ 
 σʔλ͕ҧ͏ ɾModel class ɾChart

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

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


    (int / DateTime)Ͱσʔλܕ͕ҧ͏ ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
  30. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾLineChart

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

    🔥 ๮άϥϑ / ԁάϥϑ 🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 🔥 ෳ߹άϥϑ
  32. ෳ߹άϥϑʢαϯϓϧίʔυʣ

  33. ɾϝΠϯʹΑΓάϥϑ͕มΘΔ ɾOrdinalComboChart ͸ List<common.Series<dynamic, String>> ɾ NumericComboChart ͸ List<common.Series<dynamic, num>>

    ෳ߹άϥϑ 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
  34. ɾઃఆํ๏ 1. customSeriesRenders ͰΧελϜදࣔ͢Δ 
 chart ͷ type Λઃఆ͢Δ 2.

    customRenderId ͰΧελϜද͍ࣔͨ͠ID 
 Λࢦఆ͢Δ ෳ߹άϥϑ
  35. ෳ߹άϥϑ ɾઃఆํ๏ 1. customSeriesRenders ͰΧελϜදࣔ͢Δ 
 chart ͷ type Λઃఆ͢Δ

    2. customRenderId ͰΧελϜද͍ࣔͨ͠ID 
 Λࢦఆ͢Δ 3. ը૾Λඳը͢Δ Series ʹ setAttribute Ͱ 
 ΧελϜද͍ࣔͨ͠ID Λࢦఆ͢Δ
  36. ɾ໨੝(Axes) / ຌྫ(Legends) / ڍಈ(Behaviors) / ΞΫηγϏϦςΟ(a11y) / ଞݴޠ(i18n) ͳͲͷྫ΋

    ͋Γ·͢ɻ ɾchart_ f lutter ͸ Google ͷϥΠϒϥϦͰ͕͢ɺ f l_chart ͳͲͷผͷύοέʔδ΋͋Γ·͢ɻͥͻ ͞·͟·ͳϥΠϒϥϦͰ༡ΜͰ͍ͩ͘͞ɻ ɾOSSͳͷͰɺ·ͩ଍Γͳ͍෦෼౳͋Ε͹ɺͲΜͲΜ contribute νϟϨϯδ͠·͠ΐ͏ɻ ࠷ޙʹ
  37. Let’s enjoy your hacking life.