2017年08月_ab_xue

原创十九、基础数据-3D 图表

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

2017-08-14 10:27:47 502

原创十八、基础教程-钻取功能（drilldown）

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

2017-08-14 10:25:21 7815

原创十七、标签及字符串格式化

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

2017-08-14 10:03:20 393

原创十六、基础教程-语言文字（lang）

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

2017-08-14 09:47:10 303

原创十五、基础教程-图表缩放（Zoom）

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

2017-08-14 09:41:20 1753

原创十五、基础数据-标示带（plotBands）

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

2017-08-14 09:35:24 709

原创十四、基础教程-标示线（plotLines）

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

2017-08-14 09:32:13 3287

原创十三、基础教程-HTML标签（labels）

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

2017-08-14 08:50:00 1327

原创十二、基础数据-版权信息（credits）

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

2017-08-14 08:45:12 613

原创十一、基础教程-图例（Legend）

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

2017-08-14 08:26:45 4327

原创十、基础教程-数据提示框（Tooltip）

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

2017-08-08 22:58:16 2914

原创九、基础教程-颜色（Color）

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

2017-08-08 22:33:07 1200

原创八、基础教程-数据列（Series）

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

2017-08-08 22:27:00 1655

原创七、基础教程-坐标轴（Axis）

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

2017-08-08 21:44:39 3219

原创六、基础教程-标题(Title)

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

2017-08-06 20:37:38 427

原创五、基础教程-图表配置

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

2017-08-06 20:17:55 343

原创四、基础教程-图表主要组成

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

2017-08-06 20:01:26 601

原创三、highcharts 如何设置图表配置选项

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

2017-08-06 19:49:45 312

原创二、创建第一个图表

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

2017-08-06 19:45:28 276

原创一、highchart 文件下载与使用

2017-08-06 19:27:58 1126

原创 7. vue.js-饿了吗全套-webpack打包

webpack 打包开发时的 webpack编译npm run dev执行了 node build/dev-server.js 命令

2017-08-01 23:09:42 725

原创 6. vue.js-饿了吗全套-项目运行.

构建项目项目入口（index.html）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>sell</title> </head> <body> <div id="app"></div>  </b

2017-08-01 22:47:44 1167

原创 6. vue.js-饿了吗全套-项目文件介绍

项目文件介绍build + config webpack 配制相关node_modules npm install 安装的依赖代码库src 开发的源码static 第三方静态资源文件 .gitkeep (即使是空目录，也会将这个目录放到git代码库中).babelrc(代码转换器) babel 的配置， presets: [‘es2015’, ‘stage-2

2017-08-01 22:05:44 1774

原创 5. vue.js-饿了吗全套-Vue-cli开启Vuejs项目

Vue-Cli一、介绍 vue-cli 是Vue 的脚手架工具帮助我们编写好Vue.js 基础代码的工具包括： 1. 目录结构 2. 本地调试 3. 代码部署 4. 热加载 5. 单元测试二、官方介绍地址 https://github.com/vuejs/vue-cli 三、安装node 安装vu

2017-08-01 21:40:30 1029

语言小蛀虫