How to create amazing charts using Vue. js and Chart. js

Author: JakubJuszczak Compilation: beard Daha Original: huziketang. comblogpostsdetail? PostId58e5e0e1a58c240ae35bb8e0 English connection: CreatingstunningchartswithVue. jsandChart. js reprinted please indicate the source...

Learn more about chart. js options to create beautiful charts. Interactive charts provide a cool way to visualize your data. However, most out-of-the-box solutions cannot use the default options to make brilliant charts.

In this article, I will teach you how to customize chart. js options to create cool charts.

Quick Start

We need:

• Vue. js

• Vue-chart.js

• Vue-cli

UseVue-cliTo build the basic architecture, I hope you have installed it. We useVue-chart.jsAs the package of chart. js.

vue init webpack awesome-charts

Then install the dependency in the project directory:

cd awesome-charts && yarn install

Add vue-chartjs:

yarn add vue-chartjs -S

First chart

Now let's create the first discount table.

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

Now we need to introduce the base table of the line table from vue-chartjs and create components.

InMount ()Use the data and options we have prepared to call the function.RenderChart ()Method.

    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})          }    })

The Code uses some instance data and optional parameters to pass to the Data Object of chart. js, and setsResponsive: trueTo fill the chart with the outer container.

AvailableRenderChart ()The method inherits BaseChart. This method and some attributes are defined in BaseChart.

Run & Test

OK. Now, remove Hello. vue from App. vue and introduce our chart:

    
       
  
        
  
          
  
            
  
              Linechart              
               
          
  
        
  
      
  
    
         《script》    import LineExample from './components/LineChart.js'    export default {      name: 'app',      components: {        LineExample      }    }    《script》            CopyRaw

Run the dev script on the terminal to view the chart.

yarn run dev

Make me more beautiful

Now it's time to do some beautification work.

The above describes how to use Vue. js and Chart. js to create dazzling charts. For more information, see other related articles in the first PHP community!