Chart.js lightweight chart library use case analysis

This time I will bring you an analysis of the use cases of Chart.js lightweight chart library. What are the precautions when using 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 with dynamic effects and customizable; efficient drawing efficiency on all modern browsers (IE9); Responsive layout.

GitHub source code: https://github.com/nnnick/Chart.js
Chart.js documentation: http://www.bootcss.com/p/chart. js/

Introduction

Download the source code on GitHUb and introduce the dist/Chart.bundle.js file into the project to use; view Source code and 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 have changed 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:

Sharing the steps to build a ghost blog in centos

##Analysis of the detailed use of Node.js cluster module

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