Interaktive Diagramme erstellen

7

Ich möchte eine Seite in D8 erstellen, auf der meine Benutzer einige Werte eingeben können. Sobald sie dies getan haben, möchte ich, dass sie auf eine Schaltfläche klicken, die dann basierend auf den von ihnen eingegebenen Werten zwei Kreisdiagramme für sie erstellt.

Ich sehe, dass das Diagrammmodul für D8 nicht verfügbar ist. Sie fragen sich, ob hier jemand Vorschläge hat, wie dies in D8 zum jetzigen Zeitpunkt am besten erreicht werden kann?

8 charts Salbei
quelle
Hey Sage, merci für die (späte) Annahme meiner Antwort. Haben Sie Feedback zu Ihren Erfahrungen mit Easychart in D8?
Pierre.Vriens
Np. Eigentlich habe ich kein anderes Feedback, als dass es großartig zu funktionieren scheint. Mein Entwickler hat die ganze Arbeit damit gemacht, so dass ich nicht viel zu kommentieren habe, außer es hat einige nette Funktionen.
Salbei
Nun, das ist scheinen , wie interessantes Feedback. Ich habe gelesen, was Sie geschrieben haben wie "Es ist eine Art Black Box für mich, aber alles was ich weiß ist, dass es großartig zu funktionieren scheint" ... Also danke für Ihren Kommentar hier trotzdem ...
Pierre.Vriens

Antworten:

3

Schauen Sie sich das Easychart- Modul an, das eine offizielle Version für Drupal 8 (auch für Drupal 7) enthält.

Es handelt sich um eine grafische Benutzeroberfläche, die die Highcharts- Javascript-Bibliothek als Diagramm-Engine verwendet (für die jedoch möglicherweise eine kommerzielle Lizenz erforderlich ist). Es wird behauptet, jeden Highcharts-Diagrammtyp und jede Option zu unterstützen.

Weitere Details zu diesem Modul:

  • Es definiert einen neuen Inhaltstyp (= Diagramm ), mit dem Sie Ihrer Site Diagramme hinzufügen.
  • Es wird ein Diagramm-Widget erstellt, das in Ihren eigenen Inhaltstypen verwendet werden kann.
  • Es lässt sich in das WYSIWYG- Modul integrieren und bietet eine Editor-Schaltfläche zum Hinzufügen von Diagrammen zu Ihrem WYSIWYG-Inhalt ( CKeditor und TinyMCE werden unterstützt).
  • Es bietet eine intuitive Oberfläche zum Konfigurieren von Diagrammen über das Easychart-Plugin.
  • Es unterstützt das Einfügen von CSV-Daten, um daraus Diagramme zu erstellen.
  • overheid.vlaanderen.be enthält einige Beispiele aus der Praxis einer Drupal-Website (allerdings noch nicht D8) mit einigen mit Easycharts erstellten Diagrammen (ignorieren Sie den Text auf dieser Seite, wenn Sie mit dieser Sprache nicht vertraut sind, konzentrieren Sie sich nur auf die Diagramme).

Ressourcen:

Pierre.Vriens
quelle
1

Wenn Sie mit Code vertraut sind, können Sie die Google Chart-API direkt verwenden .

Beispiel-Kreisdiagramm:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>
David Thomas
quelle