Grafieken

Bootstrap Studio heeft een krachtige grafiekcomponent waarmee u grafieken, grafieken en andere visualisaties kunt maken, ze visueel kunt aanpassen, gegevens kunt invoeren en wijzigen via JavaScript.

Een grafiek maken

Om een ​​grafiek aan uw ontwerp toe te voegen, neemt u de component Kaart uit het deelvenster Componenten en zet u deze op uw pagina. Het onderdeel reageert volledig en past zich aan de beschikbare breedte aan. Je kunt het in een Kolom plaatsen om gebruik te maken van het krachtige Bootstrap-raster

De Chart-component wordt intern mogelijk gemaakt door de populaire Chart.js bibliotheek. Bootstrap Studio bevat alle benodigde bibliotheken en stelt de grafiek automatisch voor u in.

Grafiekaanpassing

Selecteer de grafiek en ga naar het tabblad Opties in de zijbalk. Er is een groot aantal instellingen beschikbaar, te beginnen met het grafiektype: Lijn, Staaf (zowel horizontaal als verticaal), Radar, Taart, Donut, Bubbel en Scatter. Hierna heb je een aantal aanpassingsmogelijkheden:

• De legenda in-/uitschakelen en de positie wijzigen.
• De titel van de grafiek weergeven/verbergen, de lettertypefamilie en -grootte wijzigen.
• Aanpassen van de kaartassen en hun kleuren, dikte, vanaf nul.

Ten slotte hebt u een gedeelte voor gegevensinvoer waar u de kaartlabels kunt wijzigen en gegevens voor uw kaartpunten kunt invullen.

De grafiek wijzigen met JavaScript

In geavanceerde gebruiksgevallen moet u mogelijk rechtstreeks via JavaScript communiceren met de onderliggende Chart.js-instantie. Bootstrap Studio maakt het gemakkelijk door de instantie van de grafiek als een eigenschap van het canvasknooppunt weer te geven. Hier is hoe u toegang krijgt vanuit een JavaScript-bestand in uw ontwerp:

$(functie () {
  let chart = document.querySelector("canvas").chart;

  if (chart) {
    $(document).on("click", function () {
      // Wanneer op het document wordt geklikt, werkt u de grafiek bij
      // met een willekeurige waarde en animeer deze.

      chart.data.datasets[0].data[2] = Math.random() * 10000;
      chart.update();
    });
  }
});

document.addEventListener(
  "DOMContentLoaded",
  function () {
    let chart = document.querySelector("canvas").chart;

    if (chart) {
      document.addEventListener("click", function () {
        // Wanneer op het document wordt geklikt, werkt u de grafiek bij
        // met een willekeurige waarde en animeer deze.

        chart.data.datasets[0].data[2] = Math.random() * 10000;
        chart.update();
      });
    }
  },
  false
);

Let op

Bootstrap Studio met ChartJS v2.8

Probeer geen voorbeelden uit de nieuwste versie van chartJS. Het werkt niet als u de BSS-kaartwidget gebruikt.

U kunt meer lezen over alle beschikbare Chart.js-methoden in hun API-documentatie.