Detailed explanation of steps to use Chart.js lightweight chart library

This time I will bring you a detailed explanation of the steps for using the Chart.js lightweight chart library. What are the precautions when using the Chart.js lightweight chart library? The following is a practical case, let’s take a look. one time.

Preface

In a recent project, I encountered a need to draw a chart on the page. It requires a fan chart and a bar chart. Although it can Drawing using svg or canvas is not necessarily easy, so we researched and connected mainstream third-party chart libraries for project use. The following mainly records some of my experiences and solutions during use. Please refer to the official documentation for specific tutorials.

Technical Selection

Studyed Highcharts, Baidu’s ECharts, Alibaba’s G2 and Charts.js Chart library, since the project has little demand for charts and the charts are not complex, the lightweight Charts.js is introduced. Chart.js is easy to get started. You only need to reference the script file in the page and create a node to render the chart. It also provides 8 visual presentation methods for your data, each of which has dynamic effects and can be customized; has efficient drawing efficiency on all modern browsers (IE9); Responsive layout.

Introduction

Download the source code on GitHUb and introduce the dist/Chart.bundle.js file into the project to use; view the source code, I found that it is compatible with multiple module loading methods, so I used requireJs to load it on the page.

Usage experience

①The number of chart color values ​​does not need to be equal to the number of data, such as

var pieConfig = {
   type: 'pie',
   data: {
     datasets: [{
      data: [10, 20],
      backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
     }]
  }
}

②Yes Cancel responsive options: {responsive: false} to facilitate controlling the size of the chart. The chart will be as large as the canvas. The canvas will not automatically fill up the outer container.

③Cancel the click event of the legend, because clicking the legend will hide the proportion of the data by default, so I need to remove the click event, set legend: {onClick: function () {}}, and modify the click event.

④Change the legend from the default rectangle to a square, and set the font size and color value of the legend

options: {
  legend: {
   position: 'right',
   labels: {
    boxWidth: 14,// 修改宽度
    fontSize: 14,
    fontColor: '#666666'
   }
}

The effect is as follows

⑤ Remove the grid lines from the histogram, set the axis color, the width of the rectangle and display the y-axis data starting from 0. Since Chart.js 2.0 is used, the configuration parameters change a lot, so many examples on the Internet have become invalid. Here is the effective configuration code

options: {
  scales: {
   xAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏x轴方向轴线
     zeroLineColor: '#666666'// 设置轴颜色
    },
    barPercentage: 0.2,// 设置柱宽度
    ticks: {// 设置轴文字字号和色值
     fontSize: 12,
     fontColor: '#666666'
    }
   }],
   yAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏要y轴轴线
     zeroLineColor: '#666666'
     },
     ticks: {
      fontSize: 12,
      beginAtZero: true,// y轴数据从0开始展示
      fontColor: '#666666'
      }
   }]
  }
}

The effect is as follows

⑥To add units to the data of chart tooltips, you can use the callback function of tooltips to set

tooltips: {
 callbacks: {
  label: function (tooltipItem, data) {
   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%';
   var title = data.labels[tooltipItem.index] + ':';
   return title + value;
   }
  }
}

The effect is as follows

##

tooltips: {
  callbacks: {
   label: function (tooptipItem) {
    return tooptipItem.yLabel + '个' ;
   }
  }
}

The effect is as follows

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use PHP to implement facial recognition and facial recognition login for WeChat applet

Vue.js implementation Detailed explanation of the steps for adding and deleting tables

The above is the detailed content of Detailed explanation of steps to use Chart.js lightweight chart library. For more information, please follow other related articles on the PHP Chinese website!