Recommended series of tools/tips for improving programmer productivity

  • A powerful file search tool, SearchMyFiles, is recommended
  • Diagram Designer is a free and easy-to-use Diagram and UML drawing software
  • This section describes the alternative of Windows Task Manager, Process Explorer
  • Space Sniffer is a powerful disk Space detection tool
  • How can I compare the differences between two similar files on a computer
  • Programmer productivity enhancement series – a recommended JSON file view and modify widgets
  • Save JavaScript variables in the Chrome debugger to local JSON files

This is probably the most easy-to-use open source graphing library ever. Bar chart, pie chart, dot chart and other types you can think of all supported.

The official website for this open source library is www.chartjs.org/

See first hand how to implement professional statistical charts in just 40 lines of code. The code is as follows:

<html>

<canvas id="myChart" width="300px" height="300px"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

<script>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'line'.data: {

labels: ["Red"."Blue"."Yellow"."Green"."Purple"."Orange"].datasets: [{

label: '# of Votes'.data: [12.14.3.5.2.3].backgroundColor: [

'rgba (255, 99, 132, 0.2)'.'rgba (54, 162, 235, 0.2)'.'rgba (255, 206, 86, 0.2)'.'rgba (75, 192, 192, 0.2)'.'rgba (153, 102, 255, 0.2)'.'rgba (255, 159, 64, 0.2)'].borderColor: [

'rgba (255,99,132,1)'.'rgba(54, 162, 235, 1)'.'rgba(255, 206, 86, 1)'.'rgba(75, 192, 192, 1)'.'rgba(153, 102, 255, 1)'.'rgba(255, 159, 64, 1)'].borderWidth: 1}},options: {

responsive: false.scales: {

yAxes: [{

ticks: {

beginAtZero:true}}]}}});</script>

</html>
Copy the code

The effect is as follows:

A quick explanation of the code.

  • Line 2: This Canvas node is used as a container to display the graph drawn at last, that is to say, the statistical graph drawn at last is displayed in this canvas node. You can define the width and height of the icon according to your needs.
  • Line 3: Declares the CDN address of the open source library.
  • Line 8: Declare the type of graph to display. The same set of data can be displayed in different map types, including Bar, Bubble, Doughnut, horizontalBar, Line, Pie, polarArea, Radar, Scatter. The second half of this article provides the effects of each diagram.
  • Line 10: Labels: [” Red “, “Blue”, “Yellow”, “Green”, “Purple”, “Orange”]. Defines a dimension of a statistical chart. If it is a line graph, bar graph, etc. then the labels defined dimension is used as the horizontal coordinate (that is, the x-coordinate) of the statistical same.
  • Line 13: data: [12, 14, 3, 5, 2, 3] defines another dimension of the statistical chart. If it is a line graph or a bar graph, then the labels defined dimension is used as the y-coordinate of the graph. In the case of a pie chart, data defines these values to describe each dimension as a percentage of the pie (a complete circle).
  • Line 26: Responsive: false, which means using the width and height specified by the second canvas to draw the statistical chart. If Response is set to true, meaning a responsive layout, the chart is displayed in full screen mode.

That’s all it takes for an application developer to figure out the details of the drawing and even the tooltip that pops up when the user clicks the mouse over the icon.

The following is the render result of passing the type attribute of the icon in line 8 to the various supported types:

Type: line – The line graph

Doughnut – circle diagram

HorizontalBar – horizontalBar chart

Pie – A pie chart

Radar – radar diagram

polarArea

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: