Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use Charts.css tools". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Brief introduction

Data visualization can improve the user experience because the graphical representation of the data is usually easier to understand. Visualization helps end users understand data, while Charts.css can help developers convert their data into beautiful graphics using simple CSS classes.

Charts.css is a new open source framework for data visualization. It replaces the traditional JS chart library with CSS framework.

Traditional graph libraries often use JS to render data and rely heavily on JS. Large JS libraries usually affect the performance of websites, and search engines can not read the data stored in JS objects. While Charts.css is a modern CSS framework, raw data is part of HTML, making it visible to search engines and visible; using CSS does not require rendering and can improve performance.

It supports a variety of data display forms, including surface chart, bar chart, column chart, line chart, multi-data set surface chart, multi-data set bar chart, multi-data set and column chart, multi-data set line chart, percentage column chart, stacked bar chart, 3D bar effect, 3D tilt effect and so on.

Charts.css has the following characteristics:

Pure front end, built using HTML and CSS

Simple and easy to use

Personalized customization, you can set the icon style in your own way

Open source, you can modify the code

Responsive type

Multiple chart types are supported

Installation

Using jsdelivr CDN to introduce:

Using unpkg CDN to introduce:

Install using npm:

Npm install charts.css

Install using yarn:

Yarn add charts.css

Introduction of source code:

/ / download the source code package https://github.com/ChartsCSS/charts.css/releases / / copy charts.min.css to your own project and introduce easy use

Charts.css places the raw data in the table element of HTML, making it visible to search engines.

Example of data representation:

2016 Summer Olympics Medal Table Country Gold Silver Bronze USA 46 37 38 GBR 27 23 17 CHN 26 18 26

To display the data as a chart, simply add .chart-css to the class attribute of the table element and select a chart type.

A single dataset, which means that each tr element in the table has only one TD child element

Data

Multiple data sets, which means that each tr element in a table has multiple TD child elements:

Data

Bar chart:

/ / single dataset bar chart. / / multiple dataset bar chart.

Column chart:

/ / single data set column chart. / / multiple data set column chart.

Each type of chart is actually similar code (which also reflects the ease of use of the library), which will not be repeated here, refer to the official website in detail.

Individuation

To add a custom CSS, simply add id or class to the table tag:

/ / html... / / css # my-chart {...}

The best practice should be to add the chart type to the selector so that CSS applies only to that chart type, and other types of charts are not affected:

/ * Custom style applies only on bar charts * / # my-chart.bar {...} / * Other style applies only on pie charts * / # my-chart.pie {...}

3D effects: you can use the CSSbox-shadow property

# custom-effect tbody td {margin-inline-start: 10px; margin-inline-end: 20px; box-shadow: 1px-1px 1px lightgrey, 2px-2px 1px lightgrey, 3px-3px 1px lightgrey, 4px-4px 1px lightgrey, 5px-5px 1px lightgrey, 6px-6px 1px lightgrey, 7px-7px 1px lightgrey, 8px-8px 1px lightgrey, 9px-9px 1px lightgrey, 10px-10px 1px lightgrey;}

Motion effect: when the user hovers over the data item, the background color will change

# motion-effect tr {transition-duration: 0.3s;} # motion-effect tr:hover {background-color: rgba (0,0,0,0.2);} # motion-effect tr:hover th {background-color: rgba (0,0,0,0.4); color: # fff;}

Animation: the th element rotates every 3 seconds

# animations-example-2 th {animation: spin-labels 3s linear infinite;} @ keyframes spin-labels {0% {transform: rotateX (0deg);} 40% {transform: rotateX (360deg);} 100% {transform: rotateX (360deg);}} "how to use Charts.css tools" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.