Google-diagrammen zijn eenvoudige, eenvoudig te gebruiken ontwikkelaarstools om live gegevens op uw site weer te geven. Ze zijn volledig gratis, volledig aanpasbaar en eenvoudig te implementeren op een website. Google Developers biedt de code voor een breed scala aan dynamische grafieken die elke gebruiker kan implementeren en aanpassen op zijn website. Google biedt echter niet de code om gebruikersinvoervakken rechtstreeks aan een Google-diagram te koppelen. Dit instructieartikel doorloopt het stapsgewijze proces om een ​​Google-diagram te implementeren en aan te passen om gebruikersinvoer te accepteren.

Stappen

  1. 1 Selecteer de grafiek die u wilt implementeren. Ga naar de Google Charts Gallery en vind het grafiektype dat u op uw website wilt plaatsen. In dit artikel wordt beschreven hoe u een kolomdiagram kunt implementeren en aanpassen. Hoewel een kolomdiagram wordt gebruikt voor het voorbeeld, is de methode die dit artikel gebruikt om gebruikersinvoer te accepteren universeel voor alle Google-diagramtypen.
  2. 2 Kopieer en plak de code die wordt geleverd door Google Developers in een HTML-document in een IDE- of Teksteditor.
  3. 3 Declareer variabelen voor de waarden die gebruikers moeten invoeren. Deze variabelen moeten worden gedeclareerd in de scripttags rondom de code voor het Google-diagram. Stel deze variabelen gelijk aan standaard numerieke waarden. Deze waarden zijn de eerste getallen die worden weergegeven wanneer het diagram voor het eerst wordt geladen.
  4. 4 Wis onnodige diagramwaarden. Wijzig de namen van de diagramassen als u dat wilt.
  5. Een afbeelding van een waarde in een Google-diagram die wordt uitgewisseld met een variabelewaarde. 5 Binnen de code voor de grafiek vervangt u de waarden in de code voor het Google-diagram door de variabelen die in stap 3 zijn gedeclareerd. In dit voorbeeld worden de variabelen "vragen" en "bieden" genoemd.
  6. 6 Voeg in aparte 'div'-tags buiten het graph-script een HTML-formulier in met' form'-tags. Binnen de eerste "formulier" -tag, stel methode gelijk aan "post", actie gelijk aan een hashtag, id gelijk aan "formvalue" en onkeyup gelijk aan "drawChart ()".
    • Vergeet niet om naar de afbeelding hieronder te verwijzen als referentie. De volgende stap legt uit om invoervakken in te voegen, zodat ze worden geïntegreerd met uw Google-diagram.
  7. 7 Voeg "invoer" -tags toe tussen de "formulier" -tags in het HTML-document. Binnen elke "invoer" -tag, stel het type in op "nummer", stel de naam in op wat je maar wilt, stel de waarde in op "1" en stel de id in op een andere niet-numerieke waarde dan de variabelen die in stap zijn gedeclareerd 3. Typ vóór de "invoer" -tags een woord of woordgroep die elk invoervak ​​beschrijft, gevolgd door een dubbele punt. In de bovenstaande afbeelding is dit beschrijvingswoord of fase "Waarde 1" en "Waarde 2".
  8. 8 Binnen de gekrulde accolades na functie drawChart (), haalt u de gebruikersinvoer op uit het formulier met behulp van "getElementById (")."Typ de in stap 6 gedeclareerde ID tussen haakjes tussen de apostrofs. Stel de variabelen in die in stap 3 zijn gedeclareerd, gelijk aan deze waarde. Gebruik de bovenstaande afbeelding als referentie.
  9. 9 Sla de grafiek op en bekijk deze in uw browser.