2015/12/30

阿鹏细说highmaps

最近发现用highmaps的用户越来越多，都分分加入到QQ群和微信来咨询我（容我打个广告，鹏吧技术群：86031665，(^__^) ），之前写过一篇highmaps的文章，没看过的，请移步至如何使用highmaps，点击此处传送门，那么今天又写这篇文章的目的是综合了许多朋友的疑问，为大家在详细说下highmaps的一些具体用法和细节问题。

疑问

基本大家提的最多的问题如下：

如何正确引用highmaps文件？
如何给highmaps初始化赋值及钻取城市赋值？
如何点击省份向下钻取？
如何给向下钻取的城市动态添加点击事件？
如何点击省份后不是向下钻取，而是在其右侧独立展示省份的地图？

带着这些疑问我下面就为大家具体谈谈。。。

2015/11/17

Highcharts

highstock 新属性及进阶用法

highstock V2.19 新属性介绍

ordinal ：In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart. Defaults to true.

以上是官方给出的解释，大概说的什么意思呢，用我自己的话理解就是 “在X轴上所有的点都是按时间或者距离等比分配的，这就意味着没有出现的点或者后来延迟加进来的点不会占用掉x轴上的位置和空间”，接下来我们就通过例子和demo讲解。

之前我写过一篇文章highstock分时图的开发，里面提到了这个问题，我们重新回顾一遍，在分时图的开发中，例如我们需要显示的是早上 8：00到晚上20：00的数据，X轴每隔两小时显示一个label，若当前时间为9点，那么我们需要向服务端拿到8点至15点的数据，那么问题来了，我们会发现图表展示出来整个x轴就是8点到15点，而剩余15点到20点的x轴label并没有占得空间和位置，如下图所示：

2015/05/27

Highcharts

你所不知的highchart常用属性

那些你没用过，你所不知道的highchart秘密，不定期更新。

Highcharts 4.1.9

####axis.visible
这个属性用来控制是否显示yAxis或者xAxis，之前我们想要隐藏x和y轴是通过设置它的宽度为0来控制的，现在可以通过这个属性来设置了

####softThreshold
此属性是在series里设置的，默认为true。如果设置false，当series里的值出现 0，1，2值会使y轴出现负值，我想大家都遇到过此问题，我们会设置y轴的最小值使y的坐标从0开始
如果是true，则不用设置最小值，直接从0开始

Highcharts 4.1.8

####exporting.allowHTML
导出配置的一个属性，这个属性默认是false，默认导出不允许导出的svg中包含自定义的html元素。设置true即可支持自定义html元素导出

1
2
3

The HTML is rendered in a foreignObject tag in the generated SVG. 
The official export server is based on PhantomJS, which supports this, 
but other SVG clients, like Batik, does not support it.

我们会看到官方给出了这样一段话，什么意思呢？就是说渲染svg以外的html元素，官方的phantomjs 是支持的，但其他的客户端导出例如Batik 是不支持的。

`maxPointWidth`

默认值是null，用来设置柱子的最大宽度，当图表里只有几根柱子时，柱子会非常的粗，此时就需要应用此属性来设置了。

Highcharts 4.1.6

增加xAxis.title.x 和 xAxis.title.y 配置标题的作为
3D图上增加scaling 缩放 Z 轴

Highcharts 4.1.5 以内

####series.keys

series: [{
     type: 'pie',
     name: 'Browser share',
     data: [
         ['Firefox',   45.0],
         ['Chrome', 12.8, true, true],
         ['Safari',    8.5]
     ],
     keys: ['name', 'y', 'sliced', 'selected']
     //设置key的顺序后，会按照data提供的数据顺序获取
}]

`xAxis.labels.autoRotationLimit`

xAxis: {
    type: 'category',
    labels: {
        autoRotationLimit: 40
    }
}
//X轴的label超过指定长度后自动截取

`plotOptions.series.pointIntervalUnit`

当x轴为 datetime模式时，可以将此属性设置为 day,month,year ，代表间隔单位

####xAxis.labels.autoRotation
此属性是一个数组用来分别设置categories的倾斜度数，例如：

categories: ['January', 'February', 'March'],
labels: {
    autoRotation: [-10, -20, -30]
}

####yAxis.tickAmount
用来设置y轴 label的显示个数

`events.selection`

当设置了zoomType时，选中图表某个区域，能在此事件中获取到选中的区域的值范围。

selection: function (event) {
	var min=Highcharts.numberFormat(event.xAxis[0].min, 2);
	var max=Highcharts.numberFormat(event.xAxis[0].max, 2);
}

`chart.panning`、`chart.panKey`

这2个属性基本同时出现，要使用panKey，必须先将panning设置为true。它的作用是：设置一个快捷键，当x轴启用zoomType时，放大某一块区域，然后按住所设置的快捷键，点击图表拖拽可以滑动查看。

`xAxis.breaks`

此属性是一个数组，作用是用一个区间段来代表x轴某个起始点到某个结束点。例如x轴有1~10个点，我想把 5~8 之间的点不显示，直接显示 1,2,3,4,5,8,9,10。这样6,7 两个点就不显示在x轴上了。

xAxis: {
	tickInterval: 1,
	breaks: [{
		from: 5,
		to: 8,
		breakSize: 1
	}]
}

`xAxis.labels.staggerLines`

用来设置x轴分行显示

`plotOptions.line.linecap`

用来设置线条的渲染形状弧形和方形，默认是弧形，以下设置为方形

plotOptions: {
  line: {
      linecap:"square"
  }}

后面待续。。。。不定期更新

2015/05/26

Highcharts

highchart 半圆仪表盘

highchart 仪表盘半圆形

效果图

核心代码

pane: {
  startAngle: -90,
  endAngle: 90,
  background: [ {
     backgroundColor: '#fff',
     borderWidth: 0 
 }]  
},
chart: {
    type: 'gauge',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false
}

在线地址

DEMO地址：传送门

2015/05/19

Highcharts

highchart 在legend中动态显示point点的值

插件分享，闲话就不多说了，主要是实现在legend中动态展示point点的值！

将以下代码单独拷入到文件中，引用在highchart.js文件之后

(function (H) {
   H.Series.prototype.point = {}; 
   H.Chart.prototype.callbacks.push(function (chart) {
       $(chart.container).bind('mousemove', function () {
           var legendOptions = chart.legend.options,
               hoverPoints = chart.hoverPoints;
           
           if (!hoverPoints && chart.hoverPoint) {
               hoverPoints = [chart.hoverPoint];
           }
           if (hoverPoints) {
               H.each(hoverPoints, function (point) {
                   point.series.point = point;
               });
               H.each(chart.legend.allItems, function (item) {
                   item.legendItem.attr({
                       text: legendOptions.labelFormat ? 
                           H.format(legendOptions.labelFormat, item) :
                           legendOptions.labelFormatter.call(item)
                   });
               });
               chart.legend.render();
           }
       });
   });
   // 隐藏tooltip，允许crosshair
   H.Tooltip.prototype.defaultFormatter = function () { return false; };
}(Highcharts));

说明：上述代码是一段扩展，在callback中为图标重新绑定了mousemove事件，当鼠标滑过某个点，动态修改legendItem的属性，并重新渲染

来张效果示意图

DEMO地址入口：传送门

2015/03/31

Highcharts

highchart 图表之自定义属性的应用

有时候很多场景可能对于图表自身所带的数据不能满足当前业务的需求，例如目前图表api里提供了有name、x、y 、color 等属性。我们在tooltip、label、legend 等对象的formatter里可以使用到这些属性，但有时候我们还需要额外的属性或者扩展字段，有些小伙伴就不知道如何处理了！下面就给大家讲解下。

####Demo 场景之一

需求：我需要图表渲染完毕后，鼠标移到某个点上，tooltip里既要显示y轴的值，又要显示y轴值所占总数的百分比，另外点击这个点又能发生一个跳转，或者根据某个字段传值去弹出一个层展示一个新的列表，遇到这样的需求该如何处理？

效果图

####解决方案

series 数据代码(series 里我们增加了自定义的属性totals和url 2个 )

series: [{
	name:"www.peng8.net",
       data: [{
           name: 'Point 1',
			url:'http://www.peng8.net',
			totals:"20%",
           y: 1
       }, {
           name: 'Point 2',
			url:'http://www.peng8.net',
			totals:"30%",
           y: 5
       }, {
           name: 'Point 3',
			url:'http://www.peng8.net',
			totals:"40%",
           y: 5
       }, {
           name: 'Point 4',
			url:'http://www.peng8.net',
			totals:"50%",
           y: 5
       }]
   }]

tooltip 关键代码

tooltip:{
	formatter:function(){
		
		var htm="";
		htm+="标题："+this.series.name+"<br />";
		htm+="X轴:"+this.x+"<br />";
		htm+="Y轴:"+this.y+"<br />";
		htm+="所占百分比:"+this.point.totals+"<br />";
		return htm;
	}
}

这段代码用来格式化tooltip的显示，formatter函数里对tooltip里的内容进行了重组，并调用了自定义的属性 totals

events事件处理代码

plotOptions:{
	line:{
		cursor:"pointer",
		point:{
			events:{
				click:function(){
					window.open(this.options.url);
				}
			}
		}
	}
}

events 里，我们在line的click事件里调用了 url 属性，点击图表中的点，打开自定义的链接url

在线完整DEMO：传送门

总结：这个例子难度基本没有，其实重点在于如何去取到我们自定义的属性，我们可以在任何地方要活用一个东西叫 this ，例如在事件里用 console.log(this); 去打印当前的对象，然后看看对象里有哪些属性和方法我们可以用，然后一层一层往里面找，熟练掌握后就能对任何属性包括图表自身的，或者自己定义的属性灵活操作！

2015/03/13

Highcharts

如何在highchart中绘制自定义元素

highcharts 为我们提供了丰富的扩展接口，今天就给大家讲讲在highcharts中指定的位置画我们想要的按钮、图片、图形、文字等。

关于highchart 扩展方法

我们先来看看highchart自身提供的画图扩展方法 Renderer，只有了解了如何画图，我们才能在图表上绘制想要的图形，方法有如下几个，不清楚的可以上官网查看API传送门。

arc() 用来画弧线图

参数 (Number centerX, Number centerY, Number outerRadius, Number innerRadius, Number start, Number end)
centerX和centerY分别对应x，y的坐标，outerRadius 外弧的半径，innerRadius内弧的半径，start和end 通常为 -Math.PI/2，-Math.PI，或者0 表示弧的方向。
circle() 用来画圆形图

参数(Number centerX, Number centerY, Number radius)
centerX 表示x轴坐标，centerY表示y轴坐标，radius表示半径
g() 用来构建一个群组将元素包裹，参数只有一个传入名称即可

渲染后会默认变成 “highcharts-“+ name
image() 用来嵌入一张图片

参数(String source, Number x, Number y, Number width, Number height)
source 图片路径，x，y为坐标，width和height为图片的宽和高
path() 用来画路径图

这个方法参数稍微有点复杂，需要参考svg的一些路径命令，传统门
rect() 用来画区域方形图

参数(Number x, Number y, Number width, Number height, Number cornerRadius)
x，y分别为x和y轴坐标，width和height为所画区域的宽高，cornerRadius表示图形的圆角
text() 用来画文本字符
参数 (String str, Number x, Number y)
x，y分别为x和y轴坐标，str表示需要绘制的字符串文本
查看更多

2015/03/09

Highcharts

如何使用highmaps制作中国地图

带你走进 Highmaps ，本篇介绍highmap的基本用法

起初因为highmaps对中国地图的支持不够友好，没有台湾，澳门等，你懂的，政治问题。于是放弃了highmaps ，使用了echart的maps，毕竟国产功能也很齐全，但相比highmap，感觉echart相对比较臃肿，而且没有highmap流畅舒服。随着highmaps不断完善，highmaps已经解决了所谓的政治地域问题，特意为中国地图出了三个js版本。
China 、China with Hong Kong and Macau、China with Hong Kong, Macau, and Taiwan
先来个预览图：
全国地图

北京市地图展开详情

2015/03/02

Highcharts

highchart如何实现点击标题复制到剪切板

有人突然问我如何选中highchart图表的标题，然后复制到剪切板，我思考了一会，highchart图表是有svg构成的，借助于图表的事件功能就能获取到标题，甚至图表里的任何数据，那么如何复制到剪切板就是本次为大家要介绍的zClip 和 ZeroClipboard，这2者都能实现剪切的功能。

这里我就谈谈 highchart 与 ZeroClipboard 实现图表的标题复制到剪切板

需要借助ZeroClipboard.js和ZeroClipboard.swf
需要highchart 事件扩展的插件customEvents.js，传送门

具体实现

ZeroClipboard的初始化

var client=null;
function initClipboard() {
	client = new ZeroClipboard( document.getElementById("sp_title") );
	//client.clip(document.getElementById("d_clip_button"))
	client.on( "ready", function( readyEvent ) {
		client.on( "aftercopy", function( event ) {
			alert("您复制的内容为: " + event.data["text/plain"] );
		} );
		client.on( 'copy', function(event) {
			event.clipboardData.setData('text/plain',event.target.innerHTML);
        } );
	} );
}

new ZeroClipboard() 需要指定需要绑定的DOM元素，图表的标题采用html格式，ID为 “sp_title”。setData() 是给 ZeroClipboard渲染出来的flash对象赋值，这里将点击对象的innerHTML赋值给了flash。ZeroClipboard.swf 需与 ZeroClipboard.js在同一个目录下，若不在同一个目录初始化时必须为ZeroClipboard 指定swf 路径。

（ZeroClipboard 的详细介绍请参考官网点击此处传送）

highchart的初始化

$('#chart').highcharts({
	title:{
		useHTML: true,
		text: '<span class="chart-title" id="sp_title">highchart自定义事件</span>',
		events: {
            dblclick: function () {
                //这里是双击事件
             },
             click: function () {
				//这里是标题的单击事件;
             },
             contextmenu: function () {
                //这里是标题的右击事件
             }
        }
	}
});

最后示意图

如有不懂的，可以留言或者微博联系我！

2015/02/06

Highcharts

highstock高级篇之股票K线图

上篇为大家讲解了股票分时的基本用法，这次接着上篇谈谈K线图，分时图和K线图都属于highstock里的功能图表，所以在使用上基本上相同，但也略有区别。

预期想要达成的效果图

Peng8 | 鹏吧

do one thing at a time and do well

阿鹏细说highmaps

疑问

highstock 新属性及进阶用法

highstock V2.19 新属性介绍

你所不知的highchart常用属性

Highcharts 4.1.9

Highcharts 4.1.8

`maxPointWidth`

Highcharts 4.1.6

Highcharts 4.1.5 以内

`xAxis.labels.autoRotationLimit`

`plotOptions.series.pointIntervalUnit`

`events.selection`

`chart.panning`、`chart.panKey`

`xAxis.breaks`

`xAxis.labels.staggerLines`

`plotOptions.line.linecap`

后面待续。。。。不定期更新

highchart 半圆仪表盘

效果图

核心代码

在线地址

highchart 在legend中动态显示point点的值

来张效果示意图

highchart 图表之自定义属性的应用

如何在highchart中绘制自定义元素

关于highchart 扩展方法

如何使用highmaps制作中国地图

highchart如何实现点击标题复制到剪切板

具体实现

highstock高级篇之股票K线图

预期想要达成的效果图

疑问

highstock V2.19 新属性介绍

Highcharts 4.1.9

Highcharts 4.1.8

maxPointWidth

Highcharts 4.1.6

Highcharts 4.1.5 以内

xAxis.labels.autoRotationLimit

plotOptions.series.pointIntervalUnit

events.selection

chart.panning、chart.panKey

xAxis.breaks

xAxis.labels.staggerLines

plotOptions.line.linecap

后面待续。。。。不定期更新

效果图

核心代码

在线地址

来张效果示意图

关于highchart 扩展方法

具体实现

预期想要达成的效果图

`maxPointWidth`

`xAxis.labels.autoRotationLimit`

`plotOptions.series.pointIntervalUnit`

`events.selection`

`chart.panning`、`chart.panKey`

`xAxis.breaks`

`xAxis.labels.staggerLines`

`plotOptions.line.linecap`