First knowledge of Js-charts and E-charts

In the process of front-end development, often use to chart related things, many times, the chart in the display of data has an unparalleled advantage. Let's take a look at two commonly used diagrams related to plugins jscharts and Echarts. The former, the function is relatively single, but does not rely on any other plug-in, the latter feature rich, sometimes need to rely on some plug-ins, we can choose the appropriate plug-in to use as needed.

Jscharts What is JS Charts?

JS charts is a JavaScript-based diagram compiler that requires little re-coding. Using JavaScript to draw a chart will be a very easy task, because you only need to use the client-side encoding to implement it, you do not need to add additional plugins or server end modules, just to introduce files, prepare the data (Xml,json or arrays), you can generate the chart!

JS charts can be used to draw different types of charts, such as pie charts, histogram charts, and simple line charts.

Simple to use:

(1) First, we introduce a file, we only need to introduce a JS file Jscharts.js, which contains the main code and the canvas function used to adapt to IE browser.

<script type= "Text/javascript" src= "Jscharts.js" ></script>

(2) container, the second step is to prepare a container to hold the chart in the future, it can be a simple div tag, this tag must have a unique ID

<div id= "Chartcontainer" >this is just a replacement in case Javascript was not available or used for SEO purposes< /div>

The contents of this container will be replaced by Jschart rendered charts.

(3) Draw the first chart, the third step, we need a few lines of JavaScript code. Includes: Data for drawing charts, simple two-dimensional arrays. Each of the child element arrays contains two elements, two of which will be two vertices of a line chart, or an element in another chart.

<script type= "Text/javascript" >var myData = new Array ([ten], [[+], [+], [[5], [+], [+]]; var mychart = New Jschart (' Chartcontainer ', ' line '); Mychart.setdataarray (MyData); Mychart.draw ();</script>

For a simple explanation, define the data first, then select the container we have written, add the type parameter, and create a new chart object. The third step is to set the data that the chart object uses to render, and finally, draw. (When using the free version, the logo of their product will be added automatically)

Drawing with XML data:

<?xml version= "1.0"? ><jschart><dataset type= "Bar" ><data unit= "ten" value= "/><data unit" = "value="/><data unit= "value=" "/><data unit=" "value="/><data unit= "value=" 5 " /></dataset></jschart>

var mychart = new Jschart (' Chartcontainer ', ' Bar '); Mychart.setdataxml (' data.xml '); Mychart.draw ();

Drawing with JSON data:

{"Jschart": {"Datasets": [{"Type": "Pie", "data": [{"Unit": "Unit_1", "Value": "}"}, {"unit": "Unit_2", "Value": "10"}, {" Unit ":" Unit_3 "," value ":" {"}, {" unit ":" Unit_4 "," value ":" Ten "}, {" unit ":" Unit_5 "," Value ":" 5 "}]}}}

var mychart = new Jschart (' Chartcontainer ', ' pie '); Mychart.setdatajson (' Data.json '); Mychart.draw ();

(4) Watermark removal:

If the free version, will always have a logo watermark, you can use the free solution provided by users to remove the watermark: " in Jscharts.js File Search fs.bg There are altogether two, depending on the version, BG is not the same as my appearance is fs.bg.2v and then delete the two code, the following parentheses and semicolons are also deleted.

then the logo watermark is removed, the title also has JS charts, this is if you do not specify the title in JS, the default printing, so you need to set the title, Mychart.settitle (' title '); In the file initialization code everywhere add this code is OK, title replaced you want the title, note must be in Mychart.draw (); Before setting the title ".

The watermark can also be removed by using the purchase version of key, using the following methods:

<script type= "Text/javascript" >var myData = new Array ([ten], [[+], [+], [[5], [+], [+]]; var mychart = New Jschart (' Chartcontainer ', ' line ', ' b4949a117e0bff9be30 '); Mychart.setdataarray (MyData); Mychart.draw (); </ Script>

Echarts

Echarts is an open source visual library that uses JavaScript to run smoothly on PCs and mobile devices, compatible with most current browsers (Ie8/9/10/11,chrome,firefox,safari, etc.), and relies on lightweight vector graphics libraries at the bottom. Zrender provides intuitive, interactive, and highly customizable data visualization charts.

We have a lot of options to download and download the appropriate version to your needs:

Simple to use:

<! DOCTYPE html>
　
Because, Echarts is powerful, here is a simple example of it, other powerful features used in the time to further understand.
First knowledge of Js-charts and E-charts