So erstellen Sie coole Diagramme mit Vue.js und Chart.js

Erfahren Sie mehr über die Optionen von chart.js zum Erstellen schöner Diagramme. Interaktive Diagramme können eine coole Möglichkeit zur Visualisierung Ihrer Daten sein. Die meisten Standardlösungen erzeugen jedoch mit den Standardoptionen keine sehr schönen Diagramme.

In diesem Artikel zeige ich Ihnen, wie Sie die Optionen von chart.js anpassen, um coole Diagramme zu erstellen.

⚡ Schnellstart

Wir benötigen:

• Vue.js

• vue-chart.js

• vue-cli

Verwenden Sie vue-cli, um die Grundstruktur zu erstellen. Wir verwenden vue-chart.js als Packager von chart.js.

vue init webpack awesome-charts

Dann installieren Sie die Abhängigkeiten im Projektverzeichnis:

cd awesome-charts && yarn install

Vue-Chartjs hinzufügen:

yarn add vue-chartjs -S

Das erste Diagramm

Jetzt erstellen wir unsere erste Rabatttabelle.

touch src/components/LineChart.js && subl .

Jetzt müssen Sie die Basistabelle der Polylinientabelle aus vue-chartjs importieren und die Komponente erstellen.

Rufen Sie die Methode renderChart() mit den Daten und Optionen auf, die wir in der Funktion mount() vorbereitet haben.

    import {Line} from 'vue-chartjs'

    export default Line.extend({
      mounted () {

        this.renderChart({
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#FC2525',
              data: [40, 39, 10, 40, 39, 80, 40]
            },{
              label: 'Data Two',
              backgroundColor: '#05CBE1',
              data: [60, 55, 32, 10, 2, 12, 53]
            }
          ]
        }, {responsive: true, maintainAspectRatio: false})

      }
    })

Im Code werden einige Instanzdaten und optionale Parameter an das Datenobjekt von chart.js übergeben und responsive:true wird so eingestellt, dass das Diagramm den äußeren Bereich ausfüllt Container.

Der Grund, warum Sie die Methode renderChart() verwenden können, liegt darin, dass wir BaseChart erben. Diese Methode und einige Eigenschaften sind in BaseChart definiert.

Ausführen und testen

OK, jetzt löschen Sie Hello.vue aus App.vue und stellen Sie unser Diagramm vor:

    <template>
      <p id="app">
        <p class="container">
          <p class="Chart__list">
            <p class="Chart">
              <h2>Linechart</h2>
              <line-example></line-example>
            </p>
          </p>
        </p>
      </p>
    </template>

    <script>
    import LineExample from './components/LineChart.js'
    export default {
      name: 'app',
      components: {
        LineExample
      }
    }
    </script>

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    .container {
      max-width: 800px;
      margin:  0 auto;
    }
    </style>
    CopyRaw

Führen Sie dev im Terminalskript aus, wie Sie sehen können das Diagramm.

yarn run dev

Mach mich schöner

Jetzt ist es Zeit, etwas Verschönerungsarbeit zu leisten

Das obige ist der detaillierte Inhalt vonSo erstellen Sie coole Diagramme mit Vue.js und Chart.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!