2015/01/31

highstock高级篇之股票分时图

一直在用highchart在做图表，最近一段时间突然接到一活，需要用 highstock 帮客户完成一个股票K线图和分时图。虽然用法和api上与 highchart 没什么区别，但还是研究一番做出了对应的DEMO，于是抽空与大家分享下。

预期想要达成的效果图

2014/12/12

Highcharts

highchart 自定义事件插件

highchart 插件之自定义事件

下面是扩展插件的代码

(function (HC) {
        /*jshint expr:true, boss:true */
        var UNDEFINED;
        //reseting all events, fired by Highcharts
        HC.Chart.prototype.callbacks.push(function (chart) {
            var resetAxisEvents = chart.customEvent.resetAxisEvents,
                series = chart.series,
                serLen = series.length,
                xAxis = chart.xAxis,
                yAxis = chart.yAxis,
                i = 0;
            
            resetAxisEvents(xAxis, 'xAxis', chart);
            resetAxisEvents(yAxis, 'yAxis', chart);
        
            for (; i < serLen; i++) {
                series[i].update({
                    customEvents: {
                        series: series[i].options.events,
                        point: series[i].options.point.events
                    },
                    events: {
                        click: null
                    },
                    point: {
                        events: {
                            click: null
                        }
                    }
                },false);
            }
            
            chart.xAxis[0].isDirty = true;
            chart.redraw();
        });

        //custom event body
        var customEvent = HC.Chart.prototype.customEvent = function (obj, proto) {
            customEvent.add = function (elem, events, obj) {
                for (var key in events) {

                    (function (key) {
                        if (events.hasOwnProperty(key)) {
                            if(!elem[key] || elem[key] === UNDEFINED) {
                                HC.addEvent(elem.element, key, function (e) {
                                    events[key].call(obj, e);
                                    return false;
                                });
                            }
                            
                            elem[key] = true;
                        }
                    })(key)

                }
            };
            
            HC.Chart.prototype.customEvent.resetAxisEvents = function(axis, type, chart) {
                var axisLength = axis.length,
                    userOptions = chart.userOptions,
                    i = 0,
                    j = 0,
                    redraw = false,
                    customEvents, plotBandsLength, plotLinesLength, plotLines, plotBands,cAxis;
                
                for(;i<axisLength;i++) {

                    if(type === 'xAxis' && userOptions.xAxis !== UNDEFINED) {
                        
                            cAxis = HC.splat(userOptions.xAxis);
                            plotLines = cAxis[i].plotLines;
                            plotBands = cAxis[i].plotBands;

                    } else if(type === 'yAxis' && userOptions.yAxis !== UNDEFINED) {
                        
                            cAxis = HC.splat(userOptions.yAxis);
                            plotLines = cAxis[i].plotLines;
                            plotBands = cAxis[i].plotBands;
                    }
                    
                    if(plotLines !== UNDEFINED) {
                        plotLinesLength = plotLines.length;
                        
                        for(j=0;j<plotLinesLength;j++){
                            var t = plotLines[j].events;
                            if(t) {
                                plotLines[j].customEvents = t;
                                plotLines[j].events = null;
                            }
                        };
                        
                        redraw = true;
                    }
                    
                    if(plotBands !== UNDEFINED) {
                         plotBandsLength = plotBands.length;
                         
                        for(j=0;j<plotBandsLength;j++) {
                             var t = plotBands[j].events;
                             if(t) {
                                 plotBands[j].customEvents = t;
                                 plotBands[j].events = null;
                             }
                        };
                        
                        redraw = true;
                    }
                    
                    if(redraw) {
                        chart.yAxis[i].update({
                            plotLines: plotLines,
                            plotBands: plotBands
                        },false);
                    }
                };
            };


            HC.wrap(obj, proto, function (proceed) {
                var events,
                element,
                eventsPoint,
                elementPoint,
                op;

                //call default actions
                proceed.apply(this, Array.prototype.slice.call(arguments, 1));

                    //switch on object
                    switch (proto) {
                        case 'addLabel':
                            events = this.axis.options.labels.events;
                            element = this.label;
                            break;
                        case 'setTitle':
                            events = this.options.title.events;
                            element = this.title;
                            break;
                        case 'drawDataLabels':
                            events = this.dataLabelsGroup ? this.options.dataLabels.events : null;
                            element = this.dataLabelsGroup ? this.dataLabelsGroup : null;
                            break;
                        case 'render':
                            if (this.axisTitle) {
                                events = this.options.title.events;
                                element = this.axisTitle;
                            }
                            if (this.options.value || this.options.from) {
                                events = this.options.customEvents;
                                element = this.svgElem;
                            }
                            break;
                        case 'drawPoints':
                            op = this.options;
                            events = op.customEvents ? op.customEvents.series : op,
                            element = this.group;
                            eventsPoint = op.customEvents ? op.customEvents.point : op.point.events;
                            elementPoint = this.points;
                            break;
                        case 'renderItem':
                            events = this.options.itemEvents;
                            element = this.group;
                            break;
                    }
    
                    
                    if (events || eventsPoint) {
    
                        if (eventsPoint) {
                            var len = elementPoint.length
                            j = 0;
    
                            for (; j < len; j++) {
                                var elemPoint = elementPoint[j].graphic;
    
                                if (elementPoint[j].y && elemPoint !== UNDEFINED) {
                                    customEvent.add(elemPoint, eventsPoint, elementPoint[j]);
                                }
                            }
                        }
    
                        customEvent.add(element, events, this);
                    }
                    
                
            });
        };

        //labels 
        customEvent(HC.Tick.prototype, 'addLabel');

        //axis
        //title
        customEvent(HC.Axis.prototype, 'render');
        //plotbands + plotlines
        customEvent(HC.PlotLineOrBand.prototype, 'render');

        //series events & point events
        customEvent(HC.Series.prototype, 'drawPoints');
        customEvent(HC.seriesTypes.column.prototype, 'drawPoints');
        customEvent(HC.seriesTypes.pie.prototype, 'drawPoints');

        //datalabels events
        customEvent(HC.Series.prototype, 'drawDataLabels');
        customEvent(HC.seriesTypes.column.prototype, 'drawDataLabels');
        customEvent(HC.seriesTypes.pie.prototype, 'drawDataLabels');

        //title events
        customEvent(HC.Chart.prototype, 'setTitle');

        //legend items
        customEvent(HC.Legend.prototype, 'renderItem');

        //bubble charts
        if(HC.seriesTypes.bubble) {
            customEvent(HC.seriesTypes.bubble.prototype, 'drawPoints');
            customEvent(HC.seriesTypes.bubble.prototype, 'drawDataLabels');
        }
        
    })(Highcharts);

2014/12/10

Highcharts

highchart legend 可拖拽扩展

highchart 插件之legend 拖拽扩展

下面是扩展插件的代码

(function (H) {
    var addEvent = H.addEvent;

    H.wrap(H.Chart.prototype, 'init', function (proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        var chart = this,
            legend = chart.legend,
            box = legend.box,
            options = legend.options,
            isDragging,
            downX,
            downY,
            optionsX,
            optionsY,
            currentX,
            currentY;
        if (options.draggable) {
            box.css({
                cursor: 'move'
            });
            addEvent(box.element, 'mousedown', function (e) {
                e = chart.pointer.normalize(e);
                downX = e.chartX;
                downY = e.chartY;
                optionsX = options.x;
                optionsY = options.y;
                currentX = legend.group.attr('translateX');
                currentY = legend.group.attr('translateY');
                isDragging = true;
            });
            addEvent(chart.container, 'mousemove', function (e) {
                if (isDragging) {
                    e = chart.pointer.normalize(e);
                    var draggedX = e.chartX - downX,
                        draggedY = e.chartY - downY;

                    options.x = optionsX + draggedX;
                    options.y = optionsY + draggedY;

                    // Do the move is we're inside the chart
                    if (currentX + draggedX > 0 && currentX + draggedX + legend.legendWidth < chart.chartWidth && currentY + draggedY > 0 && currentY + draggedY + legend.legendHeight < chart.chartHeight) {
                        legend.group.placed = false; // prevent animation
                        legend.group.align(H.extend({
                            width: legend.legendWidth,
                            height: legend.legendHeight
                        }, options), true, 'spacingBox');
                    }
                    if (chart.pointer.selectionMarker) {
                        chart.pointer.selectionMarker = chart.pointer.selectionMarker.destroy();
                    }

                }
            });
            addEvent(document, 'mouseup', function () {
                isDragging = false;
            });
        }
    });
}(Highcharts));

前端初始化代码

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Highcharts Draggable Legend Demo'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labels: {
                zIndex: 6
            }
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            labels: {
                zIndex: 6
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
            }
        },
        legend: {
            layout: 'vertical',
            backgroundColor: 'white',
            align: 'right',
            verticalAlign: 'top',
            y: 165,
            x: -220,
            borderWidth: 1,
            borderRadius: 5,

            floating: true,
            draggable: true,
            zIndex: 20
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

效果图

demo在线预览

2014/12/09

Highcharts

Highcharts部分图表圆角显示

highchart 插件之给column和bar 圆角

下面是扩展插件的代码

(function (H) {
    H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
        var options = this.options,
            rTopLeft = options.borderRadiusTopLeft || 0,
            rTopRight = options.borderRadiusTopRight || 0,
            rBottomRight = options.borderRadiusBottomRight || 0,
            rBottomLeft = options.borderRadiusBottomLeft || 0;

        proceed.call(this);

        if (rTopLeft || rTopRight || rBottomRight || rBottomLeft) {
            H.each(this.points, function (point) {
                var shapeArgs = point.shapeArgs,
                    w = shapeArgs.width,
                    h = shapeArgs.height,
                    x = shapeArgs.x,
                    y = shapeArgs.y;

                // Preserve the box for data labels
                point.dlBox = point.shapeArgs;

                point.shapeType = 'path';
                point.shapeArgs = {
                    d: [
                        'M', x + rTopLeft, y,
                        // top side
                        'L', x + w - rTopRight, y,
                        // top right corner
                        'C', x + w - rTopRight / 2, y, x + w, y + rTopRight / 2, x + w, y + rTopRight,
                        // right side
                        'L', x + w, y + h - rBottomRight,
                        // bottom right corner
                        'C', x + w, y + h - rBottomRight / 2, x + w - rBottomRight / 2, y + h, x + w - rBottomRight, y + h,
                        // bottom side
                        'L', x + rBottomLeft, y + h,
                        // bottom left corner
                        'C', x + rBottomLeft / 2, y + h, x, y + h - rBottomLeft / 2, x, y + h - rBottomLeft,
                        // left side
                        'L', x, y + rTopLeft,
                        // top left corner
                        'C', x, y + rTopLeft / 2, x + rTopLeft / 2, y, x + rTopLeft, y,
                        'Z'
                    ]
                };
                    
            });
        }
    });
}(Highcharts));

前端初始化代码

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                groupPadding: 0
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            borderRadiusTopLeft: 5,
            borderRadiusTopRight: 5
            //borderRadiusBottomRight: 10,
            //borderRadiusBottomLeft: 10
        }]
    });
});

效果图

demo在线预览

2014/12/04

Highcharts

highchart 点击图表弹出层展示新图表

人太懒了，都不想写描述了，直接上代码吧 o(∩_∩)o 哈哈

简要说明步骤

页面先初始化一个图表
初始化代码我就省略了…

在plotOptions 里的series events 增加点击事件

 plotOptions:{
    series: {
        cursor: "pointer",
        point: {
            events: {
                click: function () {
                    //弹出方法 参数自己定义 需要什么传什么
                    showDetails(this.category);
                }
            }
        }
    }
}

然后是弹出的方法，调用了lghdialog

2014/11/24

Highcharts

highchart+table 结合phantomjs 一并生成图片

其实是看到群里有小伙伴有这个需求，我才制作了这个DEMO，因为之前用phantomjs实现过纯后台导出图片，所以顺便改了下以前的DEMO分享给大家。
phantomjs 纯后台导出请参考：http://www.peng8.net/2014/07/21/render-charts-serverside/

准备工作

去官网下载最新的phantomjs，官网提供三个版本下载，我电脑是window 7，所以用的是windows版，至于其他系统的请下载对应的版本。
解压文件，只需要对应的处理文件，例如windows版本里的就要 phantomjs.exe 和rasterize.js ，rasterize.js 用来向 phantomjs 发起请求生成快照

前端整理

这里我们需要2个页面，一个页面用来专门显示图表（default），一个用来触发弹出图表（index）
为什么我们需要2个页面呢？因为这里我们是用到了phantomjs的一个功能，生成快照！所以需要一个干净的页面，只有图表，图片生成的内容也就是我们想要生成最后样子的图片。
我借用了lhgdialog 弹窗插件来弹出展现我们要生成的图表

2014/11/05

Highcharts

highchart 之放大显示的几种方式

可能大家对highchart的api不是很熟，分享几个higchart 放大化显示的几种方法，对api熟悉可以忽略本篇文章了。

第一种方式通过设置渲染DIV的宽带来调整图表的大小

var chart=new Highcharts.Chart(option); //假设这是我们初始化的图表
$('#container').width(500);//这里重新设置container这个DIV的宽度
//接着我们调用chart对象的reflow()方法即可重新渲染图表的大小
chart.reflow();

2014/10/30

Highcharts

highchart 导出excel By Asp.net

为了照顾小伙伴，用asp.net 写了份highchart简单导出excel的例子，希望对大家有所帮助

highchart导出 excel，主要用到了内部的getCSV，将数据post到服务端，至于服务端怎么处理大家就可以可显神通了，我所指知道的一般可以用 POI、NPOI、aspose、微软com+组件等等

前端HTML

 <div>
    <div class="main">
        <div class="chart-container">
            <div id="chart1" class="chart">
            </div>
        </div>
        <p>
            <input type="button" value="Export Excel" id="btnDownLoad" />
        </p>
    </div>
</div>

2014/10/20

Highcharts

Highcharts 扩展之多张图表合并生成一张图

在highchart的导出需求中，我们做过单个图表的导出，生成单个图片，也做过多个图表同时导出，生成多张图片。但很少遇到这样一种情况，需要将客户端的图表同时导出，并合并生成在一张图片上。

今天为大家来highchart一个扩展，原理就是在一键导出的时候，根据highchart现有的API方法去获取每个图表的SVG图片信息，然后拼接好合并成一个svg，最后提交给后台进行处理，这个功能即可将多个图表生成在一张图片上，也可以一次请求到后台生成多个图片，但需要自己在后台做svg拆分，一个一个生成。

步入正题，首先引入扩展部分的javascript代码到head标签区域，或者单独建一个js文件

Highcharts.getSVG = function (charts) {
        var svgArr = [],
            top = 0,
            width = 0;
 
        $.each(charts, function (i, chart) {
 
            var svg = chart.getSVG();
            svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
            svg = svg.replace('</svg>', '</g>');
            //svg = svg.replace('<svg', '<zg ct=' + chart.options.chartype);
            //svg = svg.replace('</svg>', '</zg>');(这段注释的代码用来生成多个图片)
 
            top += chart.chartHeight;
            width = Math.max(width, chart.chartWidth);
 
            svgArr.push(svg);
        });
 
        return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

2014/10/16

Highcharts

highchart通用配置文件及使用说明

使用 highcharts 已经有好几年的时间了，用过很多图表插件！例如 funsionchart、dhtmlxChart、jqPlot、JS Charts、Open Flash Chart、Flot，在到国产最近比较好的 echarts ，这里面有基于javascript的，也有基于flash的，但最喜欢的还是 highcharts，这些图表插件基本的图表功能大部分都能满足，但区别在于图表的功能可扩展性及浏览器兼容性上，highcharts 有明显的优势。

配置文件介绍

下面步入正题，给大家分享一个 highcharts 全局配置文件，其实也没什么，无非就是将通用api里的参数放在了一个方法里，这样初始化图表就不用每次都去写一大串配置，而是用到什么参数就写什么参数，具体请看下面这段javascript代码
查看更多

Peng8 | 鹏吧

do one thing at a time and do well

highstock高级篇之股票分时图

预期想要达成的效果图

highchart 自定义事件插件

下面是扩展插件的代码

highchart legend 可拖拽扩展

下面是扩展插件的代码

前端初始化代码

效果图

Highcharts部分图表圆角显示

下面是扩展插件的代码

前端初始化代码

效果图

highchart 点击图表弹出层展示新图表

简要说明步骤

highchart+table 结合phantomjs 一并生成图片

准备工作

前端整理

highchart 之放大显示的几种方式

第一种方式通过设置渲染DIV的宽带来调整图表的大小

highchart 导出excel By Asp.net

前端HTML

Highcharts 扩展之多张图表合并生成一张图

highchart通用配置文件及使用说明

配置文件介绍

预期想要达成的效果图

下面是扩展插件的代码

下面是扩展插件的代码

前端初始化代码

效果图

下面是扩展插件的代码

前端初始化代码

效果图

简要说明步骤

准备工作

前端整理

第一种方式 通过设置渲染DIV的宽带来调整图表的大小

前端HTML

配置文件介绍

第一种方式通过设置渲染DIV的宽带来调整图表的大小