In the process of front-end development, chart-related things are often used. Many times, charts have unparalleled advantages in displaying data. Let’s take a look at two commonly used chart-related plugins jscharts and ECharts. chartjs and echarts are relatively easy to use data visualization JS libraries outside D3. The configurations of the two are basically similar. The former has relatively single functions, but does not rely on any other plug-ins; the latter has rich functions and sometimes needs to rely on some plug-ins, so we can choose the appropriate plug-ins to use according to our needs.
jscharts
What are JS Charts?
JS Charts is a chart compiler based on JavaScript that requires almost no recoding. Through it, it will be very easy to draw charts using JavaScript, because you only need to use client encoding to achieve it, and there is no need to add other plug-ins or server modules. You only need to introduce files and prepare data (xml, json or array) to generate charts!
JS Charts can be used to draw different types of charts, such as pie charts, bar charts, simple line charts, etc.
Simple use:
(1) First, when we introduce the file, we only need to introduce a js file, which contains the main code and the canvas function used to adapt to the IE browser.
<script type="text/javascript" src=""></script>
(2) Container. The second step is to prepare a container to be used to accommodate the chart in the future. It can be a simple div tag, and this tag must have a unique id
<div >This is just a replacement in case Javascript is not available or used for SEO purposes</div>
The content of this container will be replaced by a chart rendered by jschart.
(3) Draw the first chart, and the third step, we need several lines of JavaScript code. Includes: data used to draw charts, simple two-dimensional arrays. Each child element array contains two elements, which will be two vertices of a line chart, or an element in another chart.
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
(myData);
();
</script>To give a brief explanation, first define the data, then select the container we wrote, add the type parameters to create a new chart object. The third step is to set the data used to render the chart object, and finally draw it. (When using the free version, their product logo will be automatically added)
Draw using json data:
{
"JSChart": {
"datasets": [
{
"type": "pie",
"data": [
{
"unit": "Unit_1",
"value": "20"
}, {
"unit": "Unit_2",
"value": "10"
}, {
"unit": "Unit_3",
"value": "30"
}, {
"unit": "Unit_4",
"value": "10"
}, {
"unit": "Unit_5",
"value": "5"
}
]
}
]
}
}var myChart = new JSChart('chartcontainer', 'pie');
('');
();ECharts
ECharts is an open source visualization library implemented using JavaScript. It can run smoothly on PC and mobile devices. It is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.). The underlying dependency is the lightweight vector graphics library ZRender, providing intuitive, interactive, and highly personalized and customized data visualization charts.
We have many choices when downloading, just download the appropriate version according to your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- Introduced -->
<script type="text/javascript" src="js/" ></script>
</head>
<body>
<!-- forEChartsPrepare a size（Width and height）ofDom -->
<div style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// Initialize the echarts instance based on the prepared dom var myChart = (('main'));
// Specify the configuration items and data of the chart var option = {
title: {
text: 'Edit for ECharts'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: ["shirt","Cardwasher","Chiffon shirt","Pants","High heel","sock"]
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// Use the configuration items and data you just specified to display the chart. (option);
</script>
</body>
</html>The difference between
The difference between "canvas"
The display part needs to use the canvas tag, and then bind the script code part through the id.
<div style=" width: 100%;display: flex;align-items: center;justify-content: center;"> <div style="width: 70%;"> <canvas ></canvas> </div> </div>
The display part can be directly used to use the div tag. Note that the size of the canvas must be specified, and then the script code part must be bound by the id.
<div style=" width: 100%;display: flex;align-items: center;justify-content: center;"> <div style="width: 70%;height: 500px;" ></div> </div>
The difference between "grammar"
The specific syntax code is written in the script tag. The id in the canvas corresponds to the id in ('myChart1');
Linear diagram
The declaration method is:var chart = new Chart(ctx, option)
<script type="text/javascript">
var ctx = ('myChart1').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["201712", "201801", "201802", "201803", "201804", "201805", "201806",
"201807", "201808", "201809", "201810", "201811", "201812", "201901", "201902",
"201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910",
"201911"
],
datasets: [{
label: "Comprehensive Rating",
fill: false, // Whether to fill, if the line is displayed if it is not filled. backgroundColor: "rgba(242,190,64,1)", //The color of the line borderColor: "rgba(242,190,64,1)",
pointBackgroundColor: "rgba(255,255,255,1)", //The color of the data point pointStrokeColor: "rgba(242,190,64,1)",
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
},
{
label: "Food Safety Rating",
fill: false,
backgroundColor: "rgba(159,190,223,1)",
borderColor: "rgba(159,190,223,1)",
pointBackgroundColor: "rgba(255,255,255,1)",
pointStrokeColor: "rgba(159,190,223,1)",
data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
}
]
},
// Configuration options go here
options: {
customXLabelRota: 90,//The label tilt display of x-axis customXLabelRotaMinNumber: 90,//The label tilt display of x-axis scaleShowGridLines: false,
pointDot: true,
legend: {
labels: {
usePointStyle: true,//The style of the legend uses the dot style }
},
scales: {
yAxes: [{ //y-axis ticks: {
beginAtZero: true, //The y-axis starts from 0 min: 0, //The minimum value of the y-axis max: 15, //The maximum value of the y-axis stepSize: 3 // y-axis scale span }
}],
xAxes: [{
ticks: {}
}]
},
}
});
</script>
Linear diagram
The declaration method is:var myChart = (('myChart1'));
<script type="text/javascript">
var myChart = (('myChart1'));
option = {
legend: {
data: ['Comprehensive Rating', 'Food Safety Rating']
},
tooltip: {
trigger: 'axis', //Auxiliary marking appears over the mouse },
grid: { //Prevent label overflow left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ["201712", "201801", "201802", "201803", "201804", "201805", "201806",
"201807", "201808", "201809", "201810", "201811", "201812", "201901", "201902",
"201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910",
"201911"
],
axisLabel: { //Axis value tilt display interval: 0,
rotate: 40
},
},
yAxis: {
type: 'value',
max: 15,
},
series: [{
name: 'Comprehensive Rating',
type: 'line',
// stack: 'total amount',
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
// Show numerical values itemStyle: {
normal: {
color: "rgba(242,190,64,1)", //Set line color label: {
show: true
}
}
},
},
{
name: 'Food Safety Rating',
type: 'line',
// stack: 'total amount', data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
// Show numerical values itemStyle: {
normal: {
color: "rgba(159,190,223,1)", //Set line color label: {
show: true
}
}
},
}
]
};
(option);//If you don't write it, you won't be able to draw it </script>
Summarize
chartjs can only be based on canvas. Although it only has English documents, it has a higher degree of customization and mature community, and its functions are more stable.
It can be rendered based on svg or canvas, with a community library that integrates mainstream front-end frameworks, and also supports 3D effects charts, which are quite cool. Most domestic developers use this and have Chinese documentation.
This is the end of this article about comparing with the chart usage process components. For more relevant contents of comparison with charts, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!