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

This article mainly introduces "how to use RoughViz to visualize the sketch chart in Vue.js". In the daily operation, I believe many people have doubts about how to use RoughViz to visualize the sketch chart in Vue.js. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to use RoughViz to visualize the sketch chart in Vue.js". Next, please follow the editor to study!

Introduction

A chart is a graphical representation of data that makes a dataset easier to read and easier to distinguish between parts. Although most users are used to seeing simple and formal charts, some users prefer to see hand-drawn or sketched charts, which is an opportunity for roughViz to use his talents.

RoughViz is a JavaScript library based on D3.js and Rough.js. The library is designed to help build diagrams that look like sketches or hand drawings, as shown in the following example.

precondition

This tutorial assumes that the following prerequisites are met:

A basic understanding of Vue.js

Node.js 's local development environment and familiarity with Node package manager (npm)

A text editor, such as Visual Studio Code or Atom

Start

If vue-cli is not already installed, run the following command to install the latest version.

Npm install-g @ vue/cli # OR yarn global add @ vue/cli

Now, create a new vue application:

Vue create my-app

Note: this process may take several minutes. When we are finished, we can go to the new application root directory:

Cd my-app

The process described in detail above creates a new Vue.js application. To make sure everything is set up, run npm run serve. When you visit http://localhost:8080, you should see "Welcome to Your Vue.js app page" in your browser.

Add vue-roughviz

Vue-roughviz is the Vue.js wrapper for RoughViz.js. This makes the library accessible as a component, allowing seamless reuse in Vue.js-based projects.

To include vue-roughviz in our project, run:

Npm install vue-roughviz

Vue-roughViz component

Vue-roughviz provides all rawViz chart style components, including:

RoughBar--rawViz bar chart component

RoughBarH--roughViz horizontal bar chart component

RoughDonut--roughViz doughnut diagram component

RoughPie--roughViz pie chart

RoughLine--roughViz Line Chart component

RoughScatter--roughViz distributed Chart component

RoughStackedBar--roughViz stacked bar chart component

Use

After you add vue-roughviz to the project, the next step is to open the project folder in your preferred text editor.

When you open the src/App.vue file, the initial content should look similar to the following figure:

Src/App.vue file

If your view is as described above, please continue and delete all its contents and replace it with the following code:

Import {RoughBar} from "vue-roughviz"; export default {name: "App", components: {RoughBar,},}

Code description

Import...-- this line of code imports the rawBar component from the vue-roughviz we installed earlier.

Export default {}-this block is to make previously imported components (roughBar) available in our application.

This is where we call the external rawBar components, the properties specified in these components are the required prop.

Vue-roughviz props

The only prop required is data, which is the data used to construct the chart, which can be a string or an object.

If you select an object, it must contain the labels and values keys. If you use a string instead, the string must be the URL of the csv or tsv file. In this file, labels and values must also be specified as separate properties that represent each column.

Other useful prop include:

Title-- specifies the chart title

The thickness level of roughness-- chart

The color of stroke--bar stroke

Stroke-width

Fill-weight-- specifies the thickness of the internal path color.

Fill-style-- bar fill patterns, which can be one of the following:

Dashed

Solid

Zigzag-line

Cross-hatch

Hachure

Zigzag

Running

To preview our application, run npm run serve. If you have followed the above steps correctly, visiting http://localhost:8080 should allow you to view the charts displayed in your browser.

Load data from an external API

Let's do a little experiment to show the price history of bitcoin over the past 10 days in our chart. In this experiment, we will use Coingecko API.

* * Why is Coingecko?** different from other cryptocurrency API? Coingecko is free and does not require an API key to start. This is an ideal choice for our experiment.

Go ahead, replace src/App.vue with the following code

Import {RoughBar} from "vue-roughviz"; export default {name: "App", components: {RoughBar,}, data () {return {chartLabel: [], chartValue: [],} }, methods: {async loadData () {await fetch ("https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=10&interval=daily") .then (res) = > res.json () .then (rawData) = > {console.table (rawData.prices) RawData.prices.map ((data) = > {let date = new Date (data [0]). ToDateString (); let rPrice = data [1]; console.log (`Price of 1btc on ${date} is ${rPrice} `); this.chartLabel.push (date); this.chartValue.push (rPrice);}) ) .catch ((err) = > console.error ("Fetch error->", err));},}, beforeMount () {this.loadData ();},}

We created an asynchronous method, loadData (), which fetches the bitcoin price history from coingecko API and iterates through the returned data. We separate the date from the price, using the returned date as the chart label and the price as the chart value. BeforeMount () calls the loadData () function created earlier before our application is mounted to the view.

To run our application, you should see the new changes in our chart as follows:

At this point, the study on "how to use RoughViz to visualize sketched charts in Vue.js" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.