语言小蛀虫

零、坐标轴（Axis）笛卡尔图表（普通的二维数据图）都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。下图为图表中坐标轴组成部分![图表坐标轴组成部分](https://img.hcharts.cn/static/highcharts/images/docs/basic

Highcharts 图表中的任意文字都可以通过 format （格式化字符串）或 formatter （格式化回调函数） 属性来进行修改，format 总是有对应的一个或多个 formatter ，其中 format 字符串简单方便，formatter 回调函数则更加灵活，他们两都是兼容 JSON 格式的。一、HTML标签默认情况下，Highcharts 中的文字及标签使用 SVG 渲染的，所有

钻取是改变展现数据维度的层次，变换分析的粒度。它包括向上钻取（drillup）和向下钻取（drilldown）。Highcharts 在 3.0.8 开始提供内置的钻取功能功能，使用钻取功能需要额外的引入相关的模块文件<script src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>一、基础的使用下钻的基础使

Highcharts 3D 功能模块提供了少量的 3D 图形支持，目前支持 3D 柱状图、3D 饼图及 3D 散点图。使用 Highcharts 3D 图形需要额外的加载 3D 功能模块文件<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>一、3D 配置3D 配置是在 chart.options3d 下

一、 文件下载文件夹说明 |– examples 例子 |– gfx 例子用到的图片资源 |– graphics 例子用到的图片资源 |– code 所有 js 文件及源代码 |– css Highcharts css 文件（只用于 CSS 版本 Highcha

一、创建基础条形图1. 创建 div 容器在页面的 body 部分创建一个 div，并指定必须的属性（ID，高度和宽度等），代码如下<div id="container" style="min-width:800px;height:400px"></div>2. 编写图表配置代码创建 div 容器后，就可以开始编写 Highcharts 图表配置代码，这部分代码用 <script></scrip

Highcharts 是通过 JavaScript 对象的形式（JSON）来定义图表的配置参数。一、 图表配置对象当使用图表构造函数 Highcharts.Chart 来初始化图表时，图表的配置对象是以第二个参数传递给该构造函数的。

一. 简易说明一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。![Highcharts基本组成部分](http://i

本节主要讲解图表配置，对应的 API 位置为 chart，主要内容包括图表全局样式、绘图区、图表事件、等相关内容。一、 图表容器Highcharts 实例化中绑定容器的方式有很多种方式，这里列举三种：1. 通过 dom 调用 highcharts() 函数的方式$("#container").highcharts({ // Highcharts 配置 }); 2. 通过 chart

图表中的文字及语言相关的内容都是可以自定义及本地化的，下面详细说明。一、语言及文字Highcharts 中的文字可以通过 Highcharts.setOptions.lang 来设定，lang 属于全局配置，对当前页面的所有图表有效，对应的汉化后的配置是：// 全局配置，对当前页面的所有图表有效Highcharts.setOptions({ lang:{ contextBu

图表缩放指的是局部放大或缩小图表，可以更方便的查看图表数据。Highcharts支持两种方式缩放，缩放（zoom）和平移（panning）， 并且是完美支持移动端手势操作的 。一、缩放（zoom）只需要简单设置 zoomType 即可实现图表缩放，例如：$("#container").highcharts({ chart: { zoomType: 'x' } // ...

数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心一、什么是数据列数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：series : [{ name : '', data : []}]提示：数据列配置是个数组，也就是数据配置

一、数据列颜色Highcharts 中数据列的颜色是通过 colors 来指定的，colors 是个颜色值数组，默认是：colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'] 共有 10个默认颜色，你可以修改

数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置 tooltip.enabled = false 即可不启用提示框。一、提示框外观tooltip: { backgroundColor: '#FCFFC5', // 背景颜色 borderColor: 'black',

图例是图表中用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列；通过设置 legend.enabled = true | false 来打开或关闭图例。一、 图例样式1、图例容器样式图例容器指的是整个图例容器的样式，包含背景、边框、边距、宽度等，详细属性及说明见下表 参数名 解释 默认值 backgroundColor 背景颜色 null bord

图表版权信息。显示在图表右下方的包含链接的文字，默认的文字是 Highcharts，链接是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。一、版权信息的常用属性版权信息常用的属性包括是否启用版权信息、文字、链接、位置等，详细列表如下： 属性名 描述 默认值 enabled 是否显示版权信息 true href 版权信息点

HTMl标签（Lables）指的是可以放置在图表中任意位置的文字标签，由于最终的文字标签是以 SVG 渲染的，所以标签的内容只支持少量的 HTML 标签，包括：<b>、<strong>、<i>、<em>、<br/>、<span>，其中 可以通过 style 属性来设定样式，但是有效的样式仅限和文字相关的属性。HTML 标签的基本构造是：labels: { style: {

标示线是用来标记坐标轴上特殊值的一条直线，在绘图区内绘制一条自定义的线。标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴，也可以同时定义在x轴和y轴。如果标示线同时定义在x轴和y轴，定义在y轴的标示线会显示在前面。具体实例如下：1、在x轴上值为3的地方画一条红色的宽度为2px的线xAxis: { // ... 省略代码 plotLines:[{ color:'

标示带同标示线，只不过标示的内容为一段范围。标示带的作用、事件等很多都类似标示线，这里就只是简单说明标示带的相关内容，不做过多累述。一、标示带的基本配置xAxis: { // ... 省略代码 plotBands: [{ from: , // 标示带开始值 to: , // 标示带结束值

标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。设置标题和副标题的示例代码如下：title: { text: '我是标题'},subtitle: { text: '我是副标题'}一、标题的常用属性标题只有一些文字信息，所以标题的配置无非是一些定位、字体大小、颜色等的配置，常见属性如下表所示： 属性名 描述 默认值 text