1、纯js编写,优点如下:

①兼容、多设备。浏览器、手机

②免费

③轻量。highcharts.js内核库大小仅有35KB左右。

2、Highcharts依赖于jQuery,所以在加载Highcharts前必须先加载jQuery库。

3、环境配置

安装jQuery和highcharts,均包括在线和静态两种配置方式。

推荐:CDN方式

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

4、图表配置对象

Highcharts是通过JavaScript对象的形式(JSON)来定义图表的配置参数。

Highcharts简介

对象取值

在JS中可通过逗号或中括号的形式取对象的值,示例如下:

options.chart.type

options.chart['type']

Highcharts简介

数据来源有以下几种方式:

①服务端直接渲染(包括直接渲染HTML页面、HTML表格)

②Ajax请求数据接口(来自服务器数据库的数据或其他数据)

③Highcharts内置的数据功能模块读取CVS、HTML表格、Google SpreadSheets数据

④JavaScript读取纯文本数据文件,例如XML文件、JSON文件、CSV文件


参考:

http://www.runoob.com/highcharts/highcharts-tutorial.html

https://www.hcharts.cn/docs/basic-compose

相关文章:

  • 2021-11-17
  • 2021-08-04
  • 2022-02-10
  • 2021-06-01
  • 2021-08-16
  • 2021-08-18
  • 2021-08-04
猜你喜欢
  • 2022-01-29
  • 2022-12-23
  • 2021-09-27
  • 2022-12-23
  • 2021-09-03
  • 2021-12-03
相关资源
相似解决方案