Filterrutor – exempel

Det här hjälpavsnittet innehåller flera exempel som visar hur du kan anpassa stil och andra egenskaper i filterrutor för att uppnå ett antal funktionella syften.

Exempel 1 — Kompakt design

Du kan lägga till många listrutor i en filterruta, vilket möjliggör förfining av data över många olika dimensioner.

För att spara utrymme och prioritera andra visualiseringar på ditt ark kan du ge din filterruta en kompakt design där innehållet expanderas och komprimeras vid behov.

Gör följande:

1. Skapa en ny app och klistra in Exempel laddningsskript i ett nytt delavsnitt i Skriptredigeraren. Ladda sedan data.

2. Växla till arkvyn. I arkegenskaperna ställer du in Rutnätsavstånd på 42.

3. Dra en Filterruta till arket.

4. Klicka på Lägg till dimension. Välj Country.

5. I egenskapspanelen klickar du på Lägg till fält. Välj Item Type.

6. Använd knappen Lägg till fält för att lägga till fyra andra dimensioner som listrutor:

   • Order Year

   • Order Priority

   • Region

   • Sales Channel

7. En efter en expanderar du varje listruta du just lade till och ställer in Presentation > Dölj listruta på Alltid.

8. I egenskapspanelen expanderar du Utseende > Presentation.

9. Klicka på Formatering.

10. På fliken Filterfönster anger du följande egenskaper:

    • Teckenstorlek för Rubrik: 18px

    • Teckenfärg för Rubrik: Hexkod #ffffff

    • Bakgrundsfärg: Hexkod #87205d

    • Skugga: Liten, Hexkod #000000

11. På fliken Listboxes anger du följande egenskaper:

    • Teckenstorlek för Rubrik: 14px

12. Ändra storlek på filterrutan till ett utrymme på två gånger tio i arkrutnätet.

Växla till analysläge. Du kan expandera listrutor efter behov för att göra val.

Exempel 2 — Rik design

Även om en filterruta främst används för att filtrera data, kan den också användas för att visualisera data. Att införliva en rik design gör det möjligt för analytiker att få insikter när de gör olika val.

Gör följande:

1. Skapa en ny app och klistra in Exempel laddningsskript i ett nytt delavsnitt i Skriptredigeraren. Ladda sedan data.

2. Växla till arkvyn och dra ett filterfönster till arket.

3. Klicka på Lägg till dimension. Välj Item Type.

4. Klicka på Item Type listruta för att expandera dess egenskaper.

5. Expandera Presentation.

6. Aktivera inställningen Histogram.

7. Använd rullgardinsmenyn Visa frekvens för att välja Relativ frekvens (%).

8. Ställ in Fäll ihop listruta på Aldrig.

9. Expandera Sortering.

10. Ställ in Sortering på Anpassad.

11. Rensa alla alternativ och aktivera Sortera efter uttryck.

12. Välj Fallande.

13. Under Uttryck, ange följande uttryck:

    Count([Item Type])

14. I egenskapspanelen, expandera Utseende > Allmänt.

15. Inaktivera Visa rubriker.

16. Expandera Utseende > Presentation.

17. Klicka på Styling.

18. På fliken Listrutor, ange följande egenskaper:

    • Rubrik

      • Teckensnitt: Inter, sans-serif

      • Teckenstorlek: 18px

    • Innehåll:

      • Teckensnitt: Inter, sans-serif

19. Ändra storlek på filterrutan till en liten rektangulär form, till exempel tre gånger fyra rutor.

Exempel 3 – Fokuserad design

Hur du utformar din filterruta kan bero på hur du vill att användarna ska göra val. Du kanske till exempel vill begränsa användare från vissa funktioner för att uppmuntra till en mer snäv, fokuserad interaktion med data.

Scenarier inkluderar:

• Filtrering på din specifika dimension ger mest insikt när värden väljs ett i taget, eller när val av flera värden inte ger någon meningsfull insikt. För att styra analysen på detta sätt kan du stänga av att välja intervall genom att använda kryssrute-läge.

• Att söka efter värden i fältet ger antingen ingen insikt, eller är inte önskvärt.

• Du vill minimera distraktioner när du filtrerar data – till exempel urvalsverktygsfältet.

Gör följande:

1. Skapa en ny app och klistra in Exempel laddningsskript i ett nytt delavsnitt i Skriptredigeraren. Ladda sedan data.

2. Växla till arkvyn och dra ett filterfönster till arket.

3. Klicka på Lägg till dimension. Välj Item Type.

4. Klicka på Item Type listrutan för att expandera dess egenskaper.

5. Ställ in Search på Hide.

6. Stäng av Show Selection toolbar.

7. Expandera Presentation.

8. Aktivera Kryssruteläge.

9. I egenskapspanelen expanderar du Utseende > Allmänt.

10. Inaktivera Visa rubriker.

11. Ändra storlek på filterrutan till en liten rektangulär form, till exempel tre gånger fyra rutor.

Exempel 4 — Rutnätsdesign

Du kan använda rutnätläge för filterrutor som använder små, definierade datamängder. Ett bra exempel är att organisera tidsbaserade dimensioner i rutnät.

Gör följande:

1. Skapa en ny app och klistra in Exempel laddningsskript i ett nytt delavsnitt i Skriptredigeraren. Ladda sedan data.

2. Växla till arkvyn och dra ett filterfönster till arket.

3. Klicka på Lägg till dimension. Välj Order Year.

4. Klicka på Order Year listrutan för att expandera dess egenskaper.

5. Stäng av Visa titlar.

6. Expandera Presentation.

7. Ställ in Dölj listruta på Aldrig.

8. För Visa data i, välj Rutnät.

9. Ange Maximalt antal synliga kolumner till Anpassad.

10. Ange Maximalt antal kolumner till 3.

11. Lägg till Order Quarter som en listruta i filterrutan.

12. Klicka på Order Quarter listrutan för att expandera dess egenskaper.

13. Stäng av Visa titlar.

14. Expandera Presentation.

15. Ställ in Dölj listruta på Aldrig.

16. För Visa data i, välj Rutnät.

17. Ange Sortera efter till Kolumner.

18. Ange Maximalt antal synliga rader till Anpassad.

19. Ställ in Max kolumner på 1.

20. Lägg till Order Month som en listruta i filterrutan.

21. Klicka på Order Month listrutan för att expandera dess egenskaper.

22. Stäng av Visa titlar.

23. Expandera Presentation.

24. Ställ in Dölj listruta på Aldrig.

25. För Visa data i, välj Rutnät.

26. Ställ in Maximalt antal synliga kolumner på Anpassad.

27. Ställ in Maximalt antal kolumner på 4.

28. I egenskapspanelen, expandera Utseende > Allmänt.

29. Stäng av Visa titlar.

30. I egenskapspanelen expanderar du Utseende > Presentation.

31. Klicka på Stil.

32. På fliken Filterpanelen anger du följande egenskaper:

    • Bakgrundsfärg: #83af9b

33. På fliken Listrutor anger du följande egenskaper:

    • Innehåll:

      • Teckensnitt: Fredoka One, fantasy

      • Textstorlek: 15px

      • Textstorlek: Fet

      • Textfärg: #000000

    • Markeringsläge > Möjlig: #000000

    • Bakgrundsfärg: #83af9b

34. Ändra storlek på filterrutan till en storlek som fungerar bra för visningen – till exempel tre gånger tre.

Ytterligare förbättringar: sammansatt filterruta med layoutbehållaren

För ytterligare responsivitet och kontroll kan du skapa ovanstående filterruta som en serie av tre filterrutor inbäddade i en layoutbehållare. Bilden nedan visar ett exempel på hur detta kan se ut.

Exempel 5 — Anpassa till organisationens färgpalett

Filterrutor kan utformas i enlighet med organisationens färgpalett. Förutom att definiera bakgrunds- och textfärg kan du ställa in färgscheman för urvalstillstånden i din filterruta. Du kanske vill att urval ska visas i företagets huvudvarumärkesfärger snarare än standardfärgen grön.

Med anpassade teman kan du ytterligare tillämpa organisationens färgschema genom att ställa in en färg för urval över alla visualiseringar och urvalsverktygsfältet. Se Anpassade teman (endast på engelska) för mer information.

I det här exemplet skapar vi en filterruta som återspeglar följande varumärkesfärger:

• Huvudfärg: Hex-kod #3100ff

• Sekundär färg: Hex-kod #9ba7ff

Gör följande:

1. Skapa en ny app och klistra in exempeldata i ett nytt delavsnitt i Skriptredigeraren. Ladda sedan data.

2. Växla till arkvyn och dra ett filterfönster till arket.

3. Klicka på Lägg till dimension. Välj Item Type.

4. I egenskapspanelen klickar du på Lägg till fält. Välj Order Year.

5. Använd knappen Lägg till fält för att lägga till tre andra dimensioner som listrutor:

   • Order Priority

   • Region

   • Sales Channel

6. I egenskapspanelen expanderar du Utseende > Allmänt.

7. Inaktivera Visa rubriker.

8. Expandera Utseende > Presentation.

9. Klicka på Styling.

10. På fliken Filter pane anger du följande egenskaper:

    • Skugga: Liten, Hexkod #000000

11. På fliken Listboxes anger du följande egenskaper:

    • Teckenstorlek för Rubrik: 14px

    • Urvalstillstånd:

      • Vald: Hexkod #3100ff

      • Alternativ: Hexkod #9ba7ff

      • Utesluten: #bebebe

      • Valda uteslutna: #7b7a78

      • Möjlig: #ffffff

12. Ändra storlek på filterrutan till en lång rektangulär form på ena sidan av arket – till exempel tre gånger tolv rutor.

Växla till analysläge. Gör urval i filterrutan för att visa färgschemat.

Exempel laddningsskript

Sales:
LOAD 
Dual([Order Month Text], [Order Month Num]) as [Order Month],

* INLINE [
Order ID,Order Date,Order Year,Order Quarter,Order Month Text,Order Month Num,Region,Country,Item Type,Sales Channel,Order Priority,Ship Date,Units Sold,Unit Price,Unit Cost,Total Revenue,Total Cost,Total Profit
522840487,2/8/2021,2021,Q1,Feb,2,Central America and the Caribbean,Honduras,Household,Offline,H,2/13/2017,8974,668.27,502.54,5997054.98,4509793.96,1487261.02
832401311,2/19/2021,2021,Q1,Feb,2,Asia,Mongolia,Personal Care,Offline,C,2/23/2014,4901,81.73,56.67,400558.73,277739.67,122819.06
419123971,11/19/2021,2021,Q4,Nov,11,Asia,Sri Lanka,Cosmetics,Offline,M,12/18/2016,6952,437.2,263.33,3039414.4,1830670.16,1208744.24
441619336,12/30/2021,2021,Q4,Dec,12,Asia,Turkmenistan,Household,Offline,L,1/20/2011,3830,668.27,502.54,2559474.1,1924728.2,634745.9
795490682,6/30/2022,2022,Q2,Jun,6,Central America and the Caribbean,Honduras,Snacks,Online,L,7/26/2016,2225,152.58,97.44,339490.5,216804,122686.5
158535134,10/27/2022,2022,Q4,Oct,10,Australia and Oceania,Australia,Office Supplies,Online,C,11/25/2015,2924,651.21,524.96,1904138.04,1534983.04,369155
955357205,1/5/2022,2022,Q1,Jan,1,Europe,United Kingdom,Household,Online,L,2/14/2012,282,668.27,502.54,188452.14,141716.28,46735.86
259353148,4/7/2022,2022,Q2,Apr,4,Sub-Saharan Africa,Djibouti,Cosmetics,Offline,H,4/19/2014,7215,437.2,263.33,3154398,1899925.95,1254472.05
450563752,6/9/2022,2022,Q2,Jun,6,Australia and Oceania,Australia,Cereal,Offline,H,7/2/2013,682,205.7,117.11,140287.4,79869.02,60418.38
705784308,10/30/2022,2022,Q4,Oct,10,Middle East and North Africa,Libya,Clothes,Offline,H,11/17/2010,6116,109.28,35.84,668356.48,219197.44,449159.04
505716836,10/13/2022,2022,Q4,Oct,10,Central America and the Caribbean,Haiti,Cosmetics,Offline,H,11/16/2013,1705,437.2,263.33,745426,448977.65,296448.35
807025039,7/25/2023,2023,Q3,Jul,7,Central America and the Caribbean,Belize,Clothes,Offline,M,9/7/2016,5498,109.28,35.84,600821.44,197048.32,403773.12
166460740,10/24/2023,2023,Q4,Oct,10,Europe,Lithuania,Office Supplies,Offline,H,11/17/2010,8287,651.21,524.96,5396577.27,4350343.52,1046233.75
462405812,4/23/2023,2023,Q2,Apr,4,Asia,Turkmenistan,Office Supplies,Online,M,5/20/2013,5010,651.21,524.96,3262562.1,2630049.6,632512.5
816200339,8/14/2023,2023,Q3,Aug,8,Middle East and North Africa,Libya,Fruits,Online,L,9/30/2015,673,9.33,6.92,6279.09,4657.16,1621.93
555990016,5/20/2023,2023,Q2,May,5,Sub-Saharan Africa,Djibouti,Cereal,Online,H,6/17/2017,8656,205.7,117.11,1780539.2,1013704.16,766835.04
231145322,7/5/2023,2023,Q3,Jul,7,Middle East and North Africa,Pakistan,Cosmetics,Offline,L,8/16/2013,9892,437.2,263.33,4324782.4,2604860.36,1719922.04
986435210,11/6/2023,2023,Q4,Nov,11,North America,Mexico,Household,Offline,C,12/12/2014,6954,668.27,502.54,4647149.58,3494663.16,1152486.42
217221009,10/28/2023,2023,Q4,Oct,10,Australia and Oceania,Federated States of Micronesia,Beverages,Online,C,11/15/2014,9379,47.45,31.79,445033.55,298158.41,146875.14
670854651,7/20/2024,2024,Q3,Jul,7,Australia and Oceania,Samoa,Cosmetics,Online,H,8/7/2013,9654,437.2,263.33,4220728.8,2542187.82,1678540.98
213487374,10/21/2024,2024,Q4,Oct,10,Europe,Spain,Household,Offline,L,11/30/2012,4513,668.27,502.54,3015902.51,2267963.02,747939.49
663110148,9/18/2024,2024,Q3,Sep,9,Middle East and North Africa,Lebanon,Clothes,Online,L,10/8/2012,7884,109.28,35.84,861563.52,282562.56,579000.96
827844560,3/18/2024,2024,Q1,Mar,3,Sub-Saharan Africa,Kenya,Vegetables,Online,L,4/7/2012,6457,154.06,90.93,994765.42,587135.01,407630.41
430915820,2/17/2024,2024,Q1,Feb,2,North America,Mexico,Personal Care,Offline,L,3/20/2012,6422,81.73,56.67,524870.06,363934.74,160935.32
240470397,7/7/2024,2024,Q3,Jul,7,Australia and Oceania,Australia,Beverages,Offline,H,7/11/2014,9389,47.45,31.79,445508.05,298476.31,147031.74
559427106,7/30/2024,2024,Q3,Jul,7,North America,Mexico,Personal Care,Offline,M,8/8/2015,5767,81.73,56.67,471336.91,326815.89,144521.02
665095412,2/10/2025,2025,Q1,Feb,2,Sub-Saharan Africa,Mozambique,Household,Offline,L,2/15/2012,5367,668.27,502.54,3586605.09,2697132.18,889472.91
];

drop fields [Order Month Text], [Order Month Num];