Highcharts使用基础

前端开发一定少不了应用外部的依赖文件，刚开始学习 highcharts ，使用 Postman 来测试一些cdn的get请求方式的响应耗时，故使用 highcharts 来直观的显示统计的数据。

HighChart的基本使用

• 使用 highcharts 必须引用两个额外的文件： jquery和highcharts的js文件。

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/highcharts/8.0.4/highcharts.min.js"></script>

当然，也可以把文件下载到本地，本地引用就行了。

• 使用 highcharts 非常简单

<div id="contianer" style="width: 550px; height: 400px; "></div>
<script>
$().ready(function(){
    $('#contianer').highcharts(json);
});
</script>

其中 container选择一个放置图标的容器, json 是 图标的配置文件和数据对象。

• 使用 Postman 进行 get 请求 ，控制同一个文件的版本相同，对几个 CDN 进行测试。各个cdn分别迭代10次，延迟1s，期间对出入较大的进行舍弃，找出一组波动不太大的数据。

• 把统计数据记录好，填充至图表中。

highcharts json 是一个对象，通过对不同的属性进行配置来控制图标的生成，以下是一些基本属性

• title: 图表的标题
• subtitle: 图标的子标题
• xAxis: x轴
• yAxis: y轴
• tooltip: 提示工具
• legend: 图标类型
• cerdits：这个可以把highcharts的水印去除
• series: 用来填充数据
• ……

统计

• 以下是把数据填充进图标后形成的折线图。

6. 结论

因为选择的cdn都是国内的免费cdn，数量比较少，得出的结果不太具有说服力，只能给出一个推荐：
七牛云 是我觉得比较好的一个，所有的速度都比较块，波动也不太明显。
BootCDN 速度也还行。
又拍云JS库 只有少量的JavaScript文件，但是速度还行。
新浪CDN 速度就比较慢了，不推荐。