https://www.highcharts.com.cn/demo/highcharts
Web界面上经常出现各种饼图、柱形图等统计图表。其实这些都可以通过Highcharts、echarts等实现。比如Highcharts“均为纯 JavaScript 编写的 HTML5 图表库,全部源码开放。”
使用方法
1. 学习内容
登录Highcharts官网,查看Highcharts演示实例,并单击“编辑源代码”,得到JavaScript脚本和Html5代码如下。
2. 准备工作
右击如下.js文件,在自己本地的源代码文件夹中找到js文件夹,并保存至此路径。
3. 开始编写代码
1)头文件中引入外部脚本(需要注意此处引入的路径与前面保存路径的一致性)
2)代码主体中写入代码(其中一行显示三个图表,运用网格系统12格,一个图表各占3格,这是另外的知识点)
<body>
<div class="row">
<div class="row">
<div id="container1" style="max-width:400px;height:400px" class="col-md-4"></div>
<div id="container2" style="max-width:800px;height:400px" class="col-md-4"></div>
<div id="container3" style="min-width:400px;height:400px" class="col-md-4"></div>
</div>
</div>
</body>
3)代码主体之下写入Highcharts的脚本,直接从官网拷贝即可。
4. 查看效果
将保存好的.html文件在浏览器中打开,即可看到如下效果。(这里是初步效果,如需做美化调整,可以进一步深入)