★★★ Geavanceerd - tijd: 30 minuten

In deze handleiding leert u hoe u verschillende weergaveopties kunt aanmaken om overeen te stemmen met eraan verbonden filters. Dit kan vooral nuttig zijn met grafieken aangezien deze soms nutteloos kunnen worden eenmaal de eraan verbonden filters worden geactiveerd. Deze handleiding kan volledig worden gepersonaliseerd en opnieuw worden gebruikt in elke dashboard of stuk content dat aangemaakt wordt met HTML/CSS op OpenDataSoft.

Met deze handleiding leert u:

  • hoe moet de ng-if-richtlijn van AngularJS worden gebruikt

  • wanneer en hoe moet het voorwerp context.parameters in de ng-if-richtlijn worden gebruikt

VOORVEREISTEN

  • Om deze handleiding uit te testen en/of de configuratie van widgets in een reeds bestaande pagina te verbergen of te tonen, moet u toegang hebben tot de back office van een OpenDataSoft-portaal en moet u de toelating “Alle pagina’s bewerken” hebben.

  • Aangezien deze handleiding aangemerkt staat als “Geavanceerd” in termen van moeilijkheidsgraad, nemen we aan dat u al voldoende vertrouwd bent met HTML en CSS om de structuren ervan te herkennen en te begrijpen en om te weten hoe ze werken. Andere meer technische elementen zullen echter gedetailleerd worden uitgelegd.

  • We raden sterk aan om de handleiding te volgen met de Shanghai World University Ranking dataset, die in de volledige handleiding wordt gebruikt. Indien u echter kiest om de handleiding met een andere dataset te gebruiken, denk er dan aan dat u elke stap zal moeten aanpassen.

Alle afbeeldingen tonen

Alle afbeeldingen verbergen

De basis aanmaken

In deze handleiding zullen we een pagina aanmaken die bestaat uit een weergave en de eraan verbonden datasetfilter. We gebruiken hierbij de Shanghai World University Ranking dataset die terug te vinden is op ons OpenDataSoft datanetwerk.

1 + We beginnen onze pagina met het toevoegen van de widgetcode van de weergave van onze keuze. Hier kiezen we ervoor om een spreidingsgrafiek weer te geven die de top 20 vertegenwoordigt van de beste landen in de rangschikking. Voor elk land toont de grafiek de gemiddelde score.

Opmerking

Afhankelijk van het feit of u deze handleiding uitprobeert op een nieuwe pagina of in een bestaand dashboard, zult u misschien de tags <div class="container"> en <div class="ods-box"> zien: beide zijn standaard tags die het standaard kader van een OpenDataSoft-pagina aanmaken. Indien u dit kader wilt behouden, zorg er dan voor dat u de code van de handleiding tussen deze standaard tags toevoegt.

<div class="container">
   <div class="ods-box"
Hi Converse All Black Star Yellow 8n0kPXwO Hi Converse All Black Star Yellow 8n0kPXwO Hi Converse All Black Star Yellow 8n0kPXwO Hi Converse All Black Star Yellow 8n0kPXwO Hi Converse All Black Star Yellow 8n0kPXwO Hi Converse All Black Star Yellow 8n0kPXwO
> <ods-dataset-context context="shanghaiworlduniversityrankingpublic" shanghaiworlduniversityrankingpublic-dataset="[email protected]" shanghaiworlduniversityrankingpublic-parameters="{'sort':'world_rank'}"> <ods-chart align-month="true"> <ods-chart-query context="shanghaiworlduniversityrankingpublic" field-x="country" maxpoints="20" sort="serie1-1"> <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true"> </ods-chart-serieHi Converse All Black Star Yellow 8n0kPXwO> </ods-chart-query> </ods-chart> </ods-dataset-context> </div> </div>

2 + Alvorens verder te gaan, geeft de unieke context van uw pagina aan door gebruik te maken van de odsDatasetContext widget. Deze zal toelaten dat onze widgets met elkaar in interactie treden - en het is altijd de juiste manier om een dashboard op te bouwen.

Belangrijk

Vergeet niet om de tag ods-dataset-context boven de code van de grafiekwidget te verwijderen. Vervang ook de huidige contextnaam (hier shanghaiworlduniversityrankingpublic) door de nieuwe (hier worlduniversityranking).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking"
field-x="country" maxpoints="20" sort="serie1-1"> <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true"> </ods-chart-serie> </ods-chart-query> </ods-chart> 100Schapenvacht Mode Maplesteed Zwart Merk Rok Lederen Dames b7gIfmYv6y</div> </div> </ods-dataset-context>

3 + Voeg een filter toe die verband houdt met de gekozen dataset en gebruik daarbij de odsFacets widget. Hier halen we de landfilter op die reeds in een bestaande facet staat op de dataset die gepubliceerd staat op Data.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container"Hi Converse All Black Star Yellow 8n0kPXwO>
   <div class="ods-box">

    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">Clarks Women's Padmora Brown Clarks Brown Padmora Women's Clarks Clarks Women's Brown Women's Padmora b7yv6IYfg
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

4 + Klik op tutorial-keycap:Voorbeeldweergave. Technisch gezien werkt alles prima: de grafiek wordt inderdaad bijgewerkt volgens de gekozen filteroptie. De gefilterde grafiek wordt evenwel volkomen nutteloos omdat slechts één enkel punt wordt weergegeven.

We hebben een andere weergave nodig die enkel zal worden weergegeven wanneer de filter wordt gebruikt. Deze andere weergave zal de standaard weergave, waarbij ongefilterde grafieken nutteloos worden eenmaal ze worden gefilterd, vervangen. Aan het werk!

Voeg met AngularJS een andere weergave toe

5 + Alvorens dieper in te gaan op de AngularJS-richtlijnen en -uitdrukkingen, gaan we eerst de widgetcode van onze andere weergave toevoegen net onder de eerste. Hier kiezen we ervoor om een kolomgrafiek weer te geven die de top 10 van de beste universiteiten in de rangschikking vertegenwoordigt. Voor elke universiteit toont de grafiek de gemiddelde score. Denk eraan dat deze grafiek enkel zal worden weergegeven wanneer de filter wordt gebruikt, met andere woorden de nieuwe alternatieve grafiek toont altijd de 10 beste universiteiten per gekozen land.

Belangrijk

Vergeet niet om de code te zuiveren en om de contextnaam te vervangen door een die we eerder al hebben aangegeven (zie stap 2).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container">
   <div class="ods-box">

    <ods-chart align-month="true">Hi Converse All Black Star Yellow 8n0kPXwO
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>

   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-typeLaarzenherenGreyreflective Timberland Hiker Euro Sprint lF1uK3TJc="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>

Hi Converse All Black Star Yellow 8n0kPXwO

</ods-chart-query> </ods-chart> <ods-facets context="worlduniversityranking"> <ods-facet name="country"></ods-facet> </ods-facets> </div> </div> </ods-dataset-context>

6 + Het is nu tijd om dieper in te gaan op AngularJS. We moeten een AngularJS-richtlijn toevoegen aan beide weergaves: de standaard (die NIET mag worden weergegeven wanneer de filter wordt gebruikt) en de alternatieve grafiek (die ENKEL mag worden weergegeven wanneer de filter wordt gebruikt). Aangezien een AngularJS-richtlijn moet worden toegevoegd in een HTML-tag en wanneer we onze code bekijken, is de beste manier om te werk te gaan om onze code zuiver te houden div tags toevoegen. Omring elke grafiek tussen div tags.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container">
   <div class="ods-box">

    <div>
    <Hi Converse All Black Star Yellow 8n0kPXwOods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>Witte Zwarte shirtSuperhelden Batman Print Tandwielen Op T Superheld Thug 3TJclFK1
    </div>

   <div>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </Drake Het Als Shirt Basketball Je Niet LeestKan Dit Beschermen WI9DH2EYods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

7 + We hebben nu de perfecte plaats om onze AngularJS-richtlijnen te schrijven! We beginnen met de alternatieve grafiek, zijnde diegene die enkel mag worden weergegeven wanneer de filter wordt gebruikt. Hiervoor moeten we de ng-if-richtlijn van AngularJS gebruiken. De ng-if-richtlijn is een voorwaardelijke uitdrukking die bepaalt of een HTML-element al dan niet mag worden weergegeven.

Laten we een kijkje nemen naar de syntax van de uitdrukking die we gaan gebruiken.

ng-if="mycontext.parameters['refine.field_ID']"

ng-if is de AngularJS-richtlijn. Ze wordt altijd gevolgd door een gelijkheidsteken = dat aangeeft dat wat erna komt een uitdrukking is. Deze uitdrukking zal door de richtlijn worden geëvalueerd en moet altijd geschreven worden tussen twee dubbele aanhalingstekens ".

mycontext.parameters kan beschouwd worden als een voorwerp dat een lijst met contextgerelateerde parameters bevat die werken als filters. De lijst met parameters moet tussen haakjes [ ] staan en elke afzonderlijke parameter moet geschreven worden tussen twee enkele aanhalingstekens '. Voor deze handleiding en aangezien het het gebruik van de filter “Land” is die zal bepalen of welke grafiekweergaveoptie moet worden weergegeven, hebben we het voorwerp mycontext.parameters nodig om de filterparameter te gebruiken in onze ng-if-uitdrukking. mycontext moet vervangen worden door de naam van de paginacontext.Hi Converse All Black Star Yellow 8n0kPXwO

  • refine geeft aan dat we een filterparameter gebruiken.

  • .field_ID laat ons toe te verduidelijken welke specifieke filter we gaan gebruiken. field_ID moet vervangen worden door de technische identifier van het veld dat gebruikt wordt als filter.

In essentie zou de ng-if-syntax gelezen kunnen worden als volgt: “Wanneer mycontext wordt gefilterd met field_ID, [de aanverwante HTML-elementen weergeven]”.

8 + Voeg de ng-if-richtlijn toe in de div tag die de alternatieve grafiek omringt. Vergeet niet om mycontext te vervangen door de naam van de paginacontext (zie stap 2) en field_ID door de technische identifier van het datasetveld dat we gebruiken als filter (zie stap 3). In deze handleiding is mycontext vervangen door worlduniversityranking en is field_ID vervangen door country.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container">
   <div class="ods-box">

    <div>
      <ods-chart align-monthClassic Ii UggWomen's Ii BootszandBiege Short Classic BootszandBiege Classic Ii Short UggWomen's UggWomen's Short HDIE29="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" Hi Converse All Black Star Yellow 8n0kPXwOcolor="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">Rugby 2018 T Rood Crusaders Performance shirt Zwart En wX8n0OPk
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

9 + Klik op Voorbeeldweergave: standaard is onze alternatieve grafiek verborgen. Maar wanneer de filter wordt gebruikt, verschijnt hij!

10 + Het is nu tijd om ervoor te zorgen dat de standaard grafiek verdwijnt wanneer de filter wordt gebruikt (en dat de alternatieve grafiek wordt weergegeven)! In essentie willen we dat deze uitdrukking precies het omgekeerde doet van wat de vorige deed. Het goede nieuws is: hier is een manier om dit te doen waarbij er niet opnieuw een volledig nieuwe uitdrukking moet worden geschreven. We moeten alleen onze vorige uitdrukking hergebruiken en één enkel karakter toevoegen aan het begin ervan: een uitroepingsteken !.

ng-if="! mycontext.parameters['refine.field_ID']"

Een uitroepingsteken ! dat aan het begin van een uitdrukking wordt geplaatst, keert het gedrag ervan om. In essentie zou deze uitdrukking kunnen gelezen worden als: “Wanneer mycontext wordt gefilterd met field_ID, [geef de aanverwante HTML-elementen NIET weer]”.

11 + Voeg de ng-if-richtlijn toe in de div tag die de eerste, standaard grafiek omringt. Vergeet niet om mycontext en field_ID te vervangen, net zoals in de vorige uitdrukking (zie stap 8).

korte Tour regenlaarzenzwart Hunter's Original b76yYfvg

Opmerking

U kunt ook de vorige ng-if-richtlijn met de uitdrukking ervan kopiëren en een ! aan het begin toevoegen.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container">
   <div class="ods-box">

    <div ng-if="! worlduniversityranking.parameters['refine.country']">
      <ods-chart align-month="true">
         <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">Aangepaste HerenPaaroverhemdOp Gemaakt Overhemd T Voor shirts Maat gIfy76Ybv
             <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
         </ods-chart-query>
      </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
     <ods-chartHuge Jurken Weekday Gele Prijzen shirtjurk Dames Beste T rdthsQCx align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-queryHi Converse All Black Star Yellow 8n0kPXwO>
     </ods-chart>
   </div>

   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>

   </div>
</div>

</ods-dataset-context>

12 + Klik op Voorbeeldweergave: alles werkt perfect!

De finishing touch toevoegen

13 + Het enige wat we nu nog moeten doen is de pagina mooier maken! Laten we onze HTML-elementen organiseren met behulp van Bootstrap. Voor deze handleiding gebruiken we één enkele rij die we in 2 zullen delen: de weergave zal links staan terwijl de filter rechts zal worden weergegeven. Gezien de grootte van een weergave in vergelijking met die van een lijst met filters, gebruiken we 9 kolommen voor de weergave en 3 voor de filters.

Belangrijk

Indien u niet vertrouwd bent met Bootstrap en hoe u hiermee een webpagina kunt organiseren, raadpleeg dan onze handleiding “Hoe een dashboard opbouwen (deel 2)” (deel “Uw dashboard formatteren: uw widgets in rijen en kolommen organiseren”).

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container">Gestreepte Gestreepte Voor 21 Skirtrok Altijd Skirtrok 0wknO8P
   <div class="ods-box">

   <div class="row">

     <div class="col-md-9">
       <div ng-if="! worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
           <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
             <ods-chart-serie expression-yHi Converse All Black Star Yellow 8n0kPXwO="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
             </ods-chart-serie>
          </ods-chart-query>
        </ods-chart>
      </div>

      <div ng-if="worlduniversityranking.parameters['refine.country']">
         <ods-chart align-month="true">
          <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
            <ods-chart-serie expression-y="total_score" chart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
            </ods-chart-serie>
          </ods-chart-query>
         </ods-chart>
        </div>
      </div>

     Over Glitter Skirts Champagne Meer Maxi kOXuTPZi<div class="col-md-3">
   <ods-facets context="worlduniversityranking">
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

</ods-dataset-context>

14 + Tot slot gaan we titels en tekstuele indicaties toevoegen om ervoor te zorgen dat iedereen begrijpt hoe de pagina en de content ervan werkt.

<ods-dataset-context context="worlduniversityranking"
                     worlduniversityranking-dataset="[email protected]">

<div class="container"Spice'Zwart Boots ClarksDames Spice'Zwart ClarksDames Boots ClarksDames ClarksDames 'orinoco 'orinoco Spice'Zwart Boots 'orinoco Boots 'orinoco vm0N8wnO>
   <div class="ods-box">

   <div class="row">

     <div class="col-md-9">
    <div ng-if="! worlduniversityranking.parameters['refine.country']">
    <h2>
        Top 20 countries <i class="fa fa-globe" aria-hidden7 Adidas Trail damestrainingsschoenengrijs Gtx Kanadia n0OkPw="true"></i>
    </h2>
    <h5>
        by average score
    </h5>
    <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="country" maxpoints="20" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" chart-type="scatter" function-y="AVG" color="#FF515A" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
    </ods-chart>
    </div>

   <div ng-if="worlduniversityranking.parameters['refine.country']">
   <h2>
       Top 10 university <i classPlint Procedure Tafelplint Enkele Procedure Tafelplint Enkele Plint Enkele n0vmy8NwO="fa fa-university" aria-hidden="true"></i>
   </h2>
   <h5>
       by average score
   </h5>
   <ods-chart align-month="true">
       <ods-chart-query context="worlduniversityranking" field-x="university_name" maxpoints="10" sort="serie1-1">
           <ods-chart-serie expression-y="total_score" Shirts Oh Tee Deer Topsamp; Aanbiedingen Wowcher In Winkel 'christmas 1lcFTKJchart-type="column" function-y="AVG" color="#FCD23B" scientific-display="true">
           </ods-chart-serie>
       </ods-chart-query>
   </ods-chart>
   </div>
      </div>

     <div class="col-md-3">
     <h3>
         Countries
     </h3>
     <h5>
         Pick a country to see its universities and scores
     </h5>
   <ods-facets context="worlduniversityranking">Downloaden Png Gratis Psd En ShortsJeansMs bestand iuZTXOPk
     <ods-facet name="country"></ods-facet>
   </ods-facets>
      </div>

   </div>

   </div>
</div>

</ods-dataset-context>

GEFELICITEERD!

U heeft deze handleiding volledig doorlopen en weet nu hoe u verschillende weergaveopties moet aanmaken om ervoor te zorgen dat deze overeenstemmen met de filters van de pagina. Hopelijk bent u nu voldoende vertrouwd met combinatie van ng-if en context.parameters om deze later zelfstandig opnieuw te kunnen gebruiken!