一、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官网了解）

• 1.在需要使用图表的组件

	import Highcharts from 'highcharts'

• 2.定义容器

	//html
	<template>
	 	<div id="container"></div>
	</template>
	//css
	<style scoped>
		#container {
		  width: 800px;
		  height: 600px;
		}
	</style>

• 3.初始化容器

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]
            },
          ],

      })

• 4.效果