“This is the 28th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello, everyone, I touch fish small public, the real strong, will not complain, if you do not want to be looked down upon by others, you only pay more than others ten times a hundred times more efforts, to stand higher than others! The last article was JavaScript JSON. Today we are going to look at the common usage of antV/G2 charts.

Two ways to install

1. Introduce online resources

< script SRC = "https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js" > < / script >Copy the code

2. NPM installation

npm install @antv/g2 --save

import { Chart} from "@antv/g2";
Copy the code

Start with the HTML code for the chart below

<div class="main"> <div class="section"> <div class="smallTitle"> Comparison of population of Provinces in China in recent two years </div> <div id="container"></div> </div> <div class="section"> <div class="smallTitle"> </div> <div id="container_one"></div> </div> <div class="section"> <div class="smallTitle"></div> <div id="container_two"></div> </div> <div class="section"> <div Class ="smallTitle"> </div> <div id="container_three"></div>Copy the code

Then the CSS code for the diagram below

* {
  margin: 0;
  padding: 0;
}
.section {
  width: 50%;
  height: 500px;
  float: left;
}
#container,
#container_two {
  height: 400px;
  border-right: 1px solid #ccc;
}
#container_two {
  margin-top: 100px;
}
#container_one {
  height: 400px;
}
Copy the code

Use group bar charts

1. Prepare the data source, which is divided into two types: one is 2021 and the other is 2022.

Const data = [{year: "2021", province: "guangdong ", population: 1.26}, {year: "2021", province:" Shandong ", population: 1.01}, {year: "2021", province: "Henan", population: 0.99}, {year: "2021", the province: "jiangsu", population: 0.84}, {year: "2021", the province: "sichuan", population: 0.83}, {year: "2021", the province: "Hebei province", the population: 0.74}, {year: "2021", the province: "hunan", population: 0.66}, {year: "2021", the province: "zhejiang", population: 0.64}, {year: "2022", the province: "Guangdong province", the population: 1.04}, {year: "2022", the province: "shandong", population: 0.95}, {year: "2022", the province: "henan", population: 0.94}, {year: "2022", the province: "Jiangsu province", the population: 0.78}, {year: "2022", the province: "sichuan", population: 0.8}, {year: "2022", the province: "hebei", population: 0.71}, {year: "2022", the province: "Hunan", population: 0.65}, {year: "2022", the province: "zhejiang", population: 0.59}];Copy the code

Initialize the Chart object and load the data source.

 const chart = new Chart({
   container: "container",
   autoFit: true,
   height: 500
 })

 chart.data(data);
Copy the code

3. Set the display of Y-axis data and units as well as the custom title

Note: the chart scale and axis methods must be used at the same time otherwise the Y axis custom heading will be invalid

Chart. Scale (" population ", {alias: "population (million)," Max: 2, min: 0}). Chart. axis(" population ", {// set the display style of the Y axis custom title: {offset: 50}});Copy the code

4, set the mouse to move to a data prompt box

chart.tooltip({
  showMarkers: false,
  shared: true
});

Copy the code

5. Create graph syntax and draw a bar chart. The position of the graph is determined by the two attributes of province and population

Chart.interval ().position(" province * population size ").color("year").adjust([{type: "dodge",marginRatio: 0}]);Copy the code

6. Set the display of legend

chart.legend({
  position: "top"
});
Copy the code

7. Add the interactive display of adjustment charts and users

chart.interaction("active-region");
Copy the code

8. Render diagrams

chart.render();
Copy the code

Renderings are displayed

The pie chart using

1. Prepare the data source

Const arrList = [{item: "Aries ", num: 40, percent: 0.25}, {item:" Aquarius ", num: 21, percent: 0.1}, {item: "Taurus ", num: 40, percent: 0.25}, {item:" Taurus ", num: 17, percent: 0.15}, {item: "Leo ", num: 13, percent: 0.2}, {item:" Pisces ", num: 9, percent: 0.3}];Copy the code

Initialize the Chart object and load the data source.

const chart3 = new Chart({
  container: "container_three",
  autoFit: true,
  height: 500
});
  
chart3.data(arrList);
Copy the code

3. Set the coordinate system

Chart3. Coordinate (" theta ", {/ / 'polar: cascading histogram (the default) | |' is' : pie chart | | 'helix: bull 's-eye figure radius: 0.75});Copy the code

4. Set measurement (units)

chart3.scale("percent", { formatter: val => { val = val * 100 + "%"; return val; }});Copy the code

5. Set the prompt box

chart3.tooltip({
   showTitle: false,
   showMarkers: false
});
Copy the code

6. Create graph syntax and draw pie charts

chart3.interval().position("percent").color("item").label("percent", {content: data => { return `${data.item}: ${data.percent * 100}%`; } }).adjust("stack");Copy the code

7. Add the interactive display of adjustment charts and users

 chart3.interaction("element-active");
Copy the code

8. Render diagrams

chart3.render();
Copy the code

Renderings are displayed

Use a combination of bar charts and line charts.

1. Prepare the data

Const dataList = [{week: "Monday ", work: 9, holiday: 2}, {week:" Tuesday ", work: 6, holiday: 9}, {week: "Wednesday ", work: 5, holiday: 5}, {week: "Thursday ", work: 7, holiday: 1}, {week:" Friday ", work: 2, holiday: 8}, {week: "Saturday ", work: 5}, {week:" Saturday ", work: 7, holiday: 1}, {week: "Friday ", work: 2, holiday: 8}, {week:" Saturday ", work: 2, holiday: 7}, {week: "Sunday ", work: 1, holiday: 8}];Copy the code

Initialize the Chart object and load the data source

const chart2 = new Chart({
  container: "container_two",
  autoFit: true,
  height: 500
});

chart2.data(dataList);
Copy the code

3. Set the unit of measure for the Y-axis

Chart2. scale({work: {alias: "employee ", min: 0, Max: 10}, holiday: {alias:" employee ", min: 0, Max: 10}}); chart2.scale({work: {alias: "employee ", min: 0, Max: 10}}); chart2.scale({work: {alias:" employee ", min: 0, Max: 10}});Copy the code

4. Set the display of legend

chart2.legend({
   custom: true,
   items: [{value: "work",name: "work",marker: { symbol: "square", style: { fill: "#3182bd", r: 5 } }},
   {value: "holiday",name: "holiday",marker: { symbol: "hyphen",style: { stroke: "#fdae6b", r: 5, lineWidth: 3 }}}],
   position: "top" 
});
Copy the code

5. Set the Y coordinate system

chart2.axis("work", {grid: null,title: {style: {fill: "#fdae6b"},autoRotate: false}, label: {formatter: val => {return val + "s"; }, position: top } }); Chart2. axis("holiday", {title: {autoRotate: false}, // Label: {formatter: val => {return val + "mm"; chart2.axis("holiday", {title: {autoRotate: false}, // Add units to the number of y segments. }}});Copy the code

6. Set the prompt box

chart2.tooltip({
  shared: true,
  position: "top"
});
Copy the code

7, Create graph syntax (draw bar chart, line chart)

Chart2.interval ().position("week*work").color("#3182bd"); Chart2.line ().position("week*holiday").color("#fdae6b").size(3).shape("smooth"); chart2.line().position("week*holiday").color("#fdae6b"). chart2.point().position("week*holiday").color("#fdae6b").size(3).shape("circle");Copy the code

8. Add the interactive display of adjusting charts and users, remove the default classification legend screening interaction, and render charts.

chart2.interaction("active-region"); chart2.removeInteraction("legend-filter"); // Custom legend, remove the default classification legend filter interaction chart2.render();Copy the code

Renderings are displayed

Conclusion:

There are dashboard charts, also more commonly used, next time to fill. Well, this is the end of the article, welcome everyone (like + comment + attention) questions can come to exchange; I hope you find this article useful and support me. Today is the 28th day of my participation in the first Wenwen Challenge 2022, come on!