highcharts實現畫輔助線功能並刪除

 

這是本人自己實現了，推薦大家看highcharts官方的插件-注釋功能（可畫線，更強大）。我也發表過博客，地址：http://www.cnblogs.com/ZRRJDD/p/7365532.html 

 

之前一直使用echarts，后來echarts3.0沒有了畫線功能，echarts2.0有畫線功能。  自己有摸索學習了highcharts，highchart使用了自定義的划線功能。

大致的實現思路：

　　1、獲取兩個點坐標，然后畫線。然后通過renderer實現畫線的功能。在highchart中沒有畫線這個方法，但是有畫路徑方法即：this.renderer.path();里邊傳入的參數是一個數組。

　　2.刪除一條線。在畫線的時候，將畫好的線添加到每個組中，即add（group）。每個組有hide（）和show（）方法。調用hide方法即表示刪除一條線。

　　3.要實現刪除上一條線。將每條線對應一個組，然后將組group放到一個數組中。每次調用數組的pop（）方法，獲取最后一個，然后調用hide（）方法。

 

js代碼如下：

var groups = [];
$(function () {
    $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/aapl-c.json&callback=?', function (data) {
        var x = '';
        var y = '';
        var line;
        $('#container').highcharts('StockChart', {
            chart: {
                events: {
                    click: function (event) {
                        var group = this.renderer.g().add();
                        if(x !== '' && y !== '' &&groups.length %2 == 1){
                            line =   this.renderer.path(['M', x, y, 'L', event.chartX, event.chartY])
                                .attr({
                                'stroke-width': 1,
                                stroke: 'red'
                            }).add(group) ;
                            line.toFront({
                                zIndex:1
                            });
                            x = event.chartX;
                            y = event.chartY;
                        }else{
                            x = event.chartX;
                            y = event.chartY;
                        }
                        this.renderer.circle(x, y, 1).attr({
                            fill: '#FCFFC5',
                            stroke: 'black',
                            'stroke-width': 1
                        }).add(group);
                        if(groups.length %2 == 1){
                            x = '';
                            y = '';
                        }
                        groups.push(group);
                    }
                }
            },
            rangeSelector : {
                selected : 5
            },
            title : {
                text : '蘋果歷史股價（股票代碼：AAPL）'
            },
            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });
    $("#container").mousedown(function(event){
        console.log(event);
    });
});
function hiddenLine(){
    console.log(groups);
    if(groups.length > 0){
        if(groups.length % 2 === 0){
            for(var i=0;i<2;i++){
                groups.pop().hide();
            }
        }else{
            groups.pop().hide();
        }
    }
}

html代碼如下：

<div id="container" style="min-width:400px;height:400px"></div>
<input type="button" value="刪除上一條線" onclick="hiddenLine();" />

需要導入的js文件如下：

　

 hcode源代碼地址：https://code.hcharts.cn/temp/hBOl1G/1

 git源碼地址：https://github.com/ZRRJDD/highchart.git

 希望大家評論。