一、highcarts简介
简介
Highcharts 系列软件包含Highcharts JS,Highstock JS,Highmaps JS 共三款软件,均为纯 JavaScript 编写的 HTML5 图表库,全部源码开放,个人及非商业用途可以任意使用及源代码编辑。
1.Highcharts
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。
2. Highstock
Highstock 是用纯 JavaScript 编写的股票图表控件,可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件:预设置数据时间范围,日期选择器、滚动条、平移、缩放功能。
3. Highmaps
Highmaps 是一款基于 HTML5 的优秀地图组件。
Highmaps 继承了 Highcharts 简单易用的特性,利用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。
Highmaps 可以单独使用,也可以作为 Highcharts 的一个组件来使用。
详细内容请见highcharts文档教程
4. 使用
1.安装
- 1.CDN引入
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
- 2.npm下载
npm install highcharts --save
2.在vue中使用(该系列默认在vue中使用,如不熟悉,可先进vuejs官网了解)
import Highcharts from 'highcharts'
//html<template><div id="container"></div></template>//css<style scoped>#container {width: 800px;height: 600px;}</style>
const charts = Highcharts.chart('container', {chart: {//图表类型type: 'column'},//图表标题title: {text: '我的第一个图表'},//子标题subtitle: {text: '前端技术掌握程度'},//提示框tooltip: {valueSuffix: ' %'},plotOptions: {bar: {dataLabels: {enabled: true,allowOverlap: true // 允许数据标签重叠}}},//x轴配置xAxis: {categories: ['小李','小张','老王','小明']},//y轴配置yAxis: {title: {text: '掌握程度(百分比)'}},//数据series: [{name: 'HTML5',data: [90,98,96,95]},{name: 'CSS3',data: [95,93,88,92]},{name: 'JS',data: [80,78,85,82]},{name: 'Vue.js',data: [90,84,72,88]},],})
一、highcarts简介相关推荐
- etcd 笔记(01)— etcd 简介、特点、应用场景、常用术语、分布式 CAP 理论、分布式原理
1. etcd 简介 etcd 官网定义: A highly-available key value store for shared configuration and service discov ...
- Docker学习(一)-----Docker简介与安装
一.Docker介绍 1.1什么是docker Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源 Docker可以让开发者打包他们的应用以及依赖包到一个轻量级,可移植 ...
- 【Spring】框架简介
[Spring]框架简介 Spring是什么 Spring是分层的Java SE/EE应用full-stack轻量级开源框架,以IOC(Inverse Of Control:反转控制)和AOP(Asp ...
- TensorRT简介
TensorRT 介绍 引用:https://arleyzhang.github.io/articles/7f4b25ce/ 1 简介 TensorRT是一个高性能的深度学习推理(Inference) ...
- 谷粒商城学习笔记——第一期:项目简介
一.项目简介 1. 项目背景 市面上有5种常见的电商模式 B2B.B2C.C2B.C2C.O2O B2B 模式(Business to Business),是指商家和商家建立的商业关系.如阿里巴巴 B ...
- 通俗易懂的Go协程的引入及GMP模型简介
本文根据Golang深入理解GPM模型加之自己的理解整理而来 Go协程的引入及GMP模型 一.协程的由来 1. 单进程操作系统 2. 多线程/多进程操作系统 3. 引入协程 二.golang对协程的处 ...
- Linux 交叉编译简介
Linux 交叉编译简介 主机,目标,交叉编译器 主机与目标 编译器是将源代码转换为可执行代码的程序.像所有程序一样,编译器运行在特定类型的计算机上,输出的新程序也运行在特定类型的计算机上. 运行编译 ...
- TVM Operator Inventory (TOPI)简介
TOPI简介 这是 TVM Operator Inventory (TOPI) 的介绍.TOPI 提供了比 TVM 具有更高抽象的 numpy 风格的,通用操作和调度.TOPI 如何在 TVM 中,编 ...
- 计算机视觉系列最新论文(附简介)
计算机视觉系列最新论文(附简介) 目标检测 1. 综述:深度域适应目标检测标题:Deep Domain Adaptive Object Detection: a Survey作者:Wanyi Li, ...
最新文章
- 新款Tesla最低仅售26.2万,马斯克终于凑齐了S3XY
- 计算机专业术语graphui,计算机专业术语英译
- Leetcode 189. 旋转数组 解题思路及C++实现
- linux 修改用户组_linux小白到大神的成长之路:linux系统用户组的管理!
- SSM整合支付宝支付功能
- c++bisection method二等分法的实现算法(附完整源码)
- 机器学习(一) 基于sklearn库的数据集划分(交叉验证)
- npm升级依赖包_Taro跨端开发之依赖管理
- 如何在电脑上截屏_如何在电脑上截图?教你6种常用的截图方法,总有你不知道的...
- Java技术知识点的一些总结
- LINQ语法之into
- MEncoder的基础用法—6.10. 保持视频画面比例
- svn里的branch、trunk、tag的用处
- word计算机技能大赛,办公技能大赛WORD试题.doc
- vs2019安装时,一直卡在正在提取文件
- 定积分求导例题_高中数学导数简单题——定积分、导数、导数的几何意义等解题方法...
- 挂马攻击的介绍和防御
- 台式计算机中常用的机械硬盘,台式机如何安装机械硬盘?给台式电脑安装机械硬盘的详细步骤...
- SSD讲堂三(视频)_SSD_tensorflow_imageio方法_视频检测_附源码
- 极限、连续、导数与微分