How long do you think it will take to create a chart like this in a webpage?
It does take a long time, if you are not particularly skilled in JavaScript.
But the good news is that if you use the Highcharts framework, more than ten lines of code may allow you to generate such effective charts on the page.
Of course, its functions are far more than these, such as various charts, printing, exporting, and comparative analysis.
It can not only be used for website chart analysis, but also the things made with this when there is any summary and demonstration must be eye-catching. You can completely abandon PPT.
So hurry up and learn how to use him! ! !
Here is a simple Dome:
1. In highcharts attributes are separated by commas
2. Use {} in a large attribute, fill in the specific attribute in {}
3. In addition to data, other attributes are generally used. "Include
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div> </div><script> $(function () { $(".chart").highcharts({ //Specify the chart where the class is chart:{ type:'line' //The type of the chart, and column, etc.}, title:{ text:'Dome01' //The title of the chart}, xAxis:{ categories:['A','B','C','D'] //The grouping of x coordinates}, yAxis:{ title:{ text:'some' //The title of y coordinates} }, series:[{ name:'zhangsan', //The name of the data:[2,3,5,3] //Specific data},{ name:'lisi', data:[3,5,1,3] },{ name:'wangwu', data:[1,4,6,2] }] }) ; });</script></body></html>It doesn't matter if you can't understand it now. You can try it in your browser. I will update the articles related to Highcharts in the future. Interested friends can continue to support Wulin.com.