Schaue dir den Chart.js-Kurs an: Chart.js, Der fehlende Leitfaden Kurs
Categories
Uncategorized

Chart.js Plugin Sortierung

Das Chart.js Sorting Plugin ist ein Plugin, das es Ihnen ermöglicht, das Balkendiagramm schnell aufsteigend (ASC, von niedrig nach hoch), absteigend (DESC, von hoch nach niedrig) zu sortieren und die Werte auf den ursprünglichen Zustand zurückzusetzen. 

Die Idee entstand aufgrund eines Kommentars eines Zuschauers, der sich fragte, warum die Sortierungsoption von Chart.js so kompliziert war und diese einfache Funktion integriert werden sollte. Nachdem dies überlegt wurde und festgestellt wurde, dass dies durchaus machbar wäre, wurde dieses Plugin erstellt. 

Chart.js Plugin Sortierung oder besser gesagt das Sortierungs-Plugin für Chart.js macht das Sortieren zum Kinderspiel. Die Notwendigkeit, Ihr eigenes Code dafür zu schreiben, entfällt. 

Mit Chart JS beginnen

Wie installiere ich das? Um dies zu installieren, müssen Sie die JavaScript-Datei des Sortierungs-Plugins in Ihre HTML-Datei einfügen. Stellen Sie sicher, dass Sie dies nach der Chart.js-Bibliotheksdatei hinzufügen. 

Once you did that you need to activate the file. It has been added but it is still on standby. To activate the file we need to register the Chart.js plugin. Understanding that it is now ready to start. 

To do this we use the command with the plugin name, which is ‘ChartjsPluginSorting’.  

// Register ChartjsPluginSorting
Chart.register(ChartjsPluginSorting)

Once registered, and loaded correctly you will see the three buttons immediately and the bar chart can be sorted. All the buttons are nested within a DIV container. 

The three Buttons

The Sorting Plugin for Chart.js has three buttons. All buttons are built in HTML. Which means that adding css styling to these buttons is easy by assigning a class to each specific button. 

There buttons are: 

  • ASC or Low to High Button
  • DESC or High to Low Button
  • Reset Button

ASC or Low to High Button

The ASC or Low to High Button will sort the values from low to high. If there are multiple identical values it will sort them according to lowest values and alphabetical order based on the x scale labels of the category scale type. 

How to customize the ASC Button:

NameTypeScriptableIndexableDefaultVideo Explainer
classstringNoNo
labelstringNoNo‘Asc’
topPositionnumberNoNo0
rightPositionnumberNoNo40

DESC or High to Low Button

The DESC or High to Low Button will sort the values from high to low. If there are multiple identical values it will sort them according to highest values and the reversed alphabetical order based on the x scale labels of the category scale type. 

How to customize the DESC Button:

NameTypeScriptableIndexableDefaultVideo Explainer
classstringNoNo
labelstringNoNo‘Desc’
topPositionnumberNoNo0
rightPositionnumberNoNo0

Reset Button

The reset button is self explanatory and will reset the values back to initial load.

How to customize the Reset Button. 

NameTypeScriptableIndexableDefaultVideo Explainer
classstringNoNo
labelstringNoNo‘Reset’
topPositionnumberNoNo0
rightPositionnumberNoNo80

Schreiben Sie einen Kommentar

de_DE_formalGerman