2015/05/27

你所不知的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/05/11

angularjs

angularjs中自定义绑定标签

在使用ng的过程中，默认的绑定符号是 \{\{ng变量\}\}，但有时候会与其他插件的一些模版符号冲突，因此我们需要自定义ng渲染的符号，能不能将 \{\{ng变量\}\} 替换成 [[ng变量]] 或者 {[ng变量]}，答案是肯定的，主要是利用 $interpolateProvider内置服务修改标识符。代码如下所示

<body ng-app="MyModule">
<form id="form1" runat="server">
<div>
      <div ng-controller="main">
          [[test]]
      </div>
</div>
</form>
<script type="text/javascript">
    angular.module('MyModule', []).config(['$interpolateProvider', function ($interpolateProvider) {

        angular.bootstrap(document.documentElement,

        [function ($interpolateProvider) {

            $interpolateProvider.startSymbol('[[');

            $interpolateProvider.endSymbol(']]');

        }]);

    }]);
    function main($scope, $http) {
        $scope.test = "aaaa";
    }
</script>
</body>

2015/04/09

asp.net

分享 aspose 的一些基本用法

Aspose 是Aspose公司旗下的最全的一套office文档管理解决方案，主要提供.net跟java两个开发语言的控件套包。功能异常强大，各个平台基本都支持，强力推荐大家使用。
本文就根据我所用的经历简要介绍Aspose的一些用法！

注：由于小弟只在ASP.NET 中曾用Aspose 导出过word ，所以接下来的介绍都是asp.net环境下的一些用法。

资源包

首先我们得去官网下载 asp.net aspose的DLL 程序集，稍后会在项目中使用。
官网的DLL 会带有水印和商标，因此大家可以在网上搜索破解版，这里我就不啰嗦了

基本用法

1	Aspose.Words.Document doc = new Aspose.Words.Document();

用来申明一个 word文件对象，后面() 里可以增加参数，实例化有5个重载，括号中什么都不写表示空文档对象，若写上本地word的路径，则是将word文件读取到当前word文件对象中。

1	Aspose.Words.DocumentBuilder builder = new Aspose.Words.DocumentBuilder(doc);

DocumentBuilder 类似一个文档操作工具，用来操作已经实例化的Document 对象，DocumentBuilder 里有许多方法例如插入文本、插入图片、插入段落、插入表格等等

2015/04/08

angularjs

如何解决angularjs中post参数获取不到的问题

解决angularjs post方式提交时，获取不到参数

angular.module('MyModule', [], function ($httpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

    /**
    * The workhorse; converts an object to x-www-form-urlencoded serialization.
    * @param {Object} obj
    * @return {String}
    */
    var param = function (obj) {
        var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

        for (name in obj) {
            value = obj[name];

            if (value instanceof Array) {
                for (i = 0; i < value.length; ++i) {
                    subValue = value[i];
                    fullSubName = name + '[' + i + ']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            }
            else if (value instanceof Object) {
                for (subName in value) {
                    subValue = value[subName];
                    fullSubName = name + '[' + subName + ']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            }
            else if (value !== undefined && value !== null)
                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
        }

        return query.length ? query.substr(0, query.length - 1) : query;
    };

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [function (data) {
        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    } ];
});

将这段代码添加到指定的模块上，作用是将Content-Type 请求方式由 application/json 变为 'application/x-www-form-urlencoded;charset=utf-8。

$scope.save = function () {
    $http.post(location.href + "?action=Save", {
        aaa: "1111",
        bbb: "2222"
    }).success(function (r) {
        alert(r);
    }).error(function () {

    });
}

这样后台就能正常的获取参数了

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 () {
                //这里是标题的右击事件
             }
        }
	}
});

最后示意图

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

Peng8 | 鹏吧

do one thing at a time and do well

你所不知的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点的值

来张效果示意图

angularjs中自定义绑定标签

分享 aspose 的一些基本用法

资源包

基本用法

如何解决angularjs中post参数获取不到的问题

解决angularjs post方式提交时，获取不到参数

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

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

关于highchart 扩展方法

如何使用highmaps制作中国地图

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

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

效果图

核心代码

在线地址

来张效果示意图

资源包

基本用法

解决angularjs post方式提交时，获取不到参数

关于highchart 扩展方法

具体实现

`maxPointWidth`

`xAxis.labels.autoRotationLimit`

`plotOptions.series.pointIntervalUnit`

`events.selection`

`chart.panning`、`chart.panKey`

`xAxis.breaks`

`xAxis.labels.staggerLines`

`plotOptions.line.linecap`