4

ハイチャートでは、ポイントのデータラベルにドラッグエフェクトを追加しようとしています。特定のラベルをターゲットにする方法をいくつか見つけました。このフィドルでは、私の試みのいくつかを見ることができます。（私はここで1つのフィドルでさまざまな試みを組み合わせて、私が試したことを披露しました）

http://jsfiddle.net/EjwaX/3/

これで、chart.series [0] .data [0].dataLabelとpointsclickイベントの両方を使用して、dataLabelの属性を変更できるようになりました。ただし、jquery ui .draggable（）をラベルに添付することはできません。チャート内の要素をドラッグ可能にすることはどういうわけか可能ですか？

さらに情報が必要な場合はお知らせください

4

2 に答える 2

1

実際draggableには、ウィジェットをデータラベルにうまく添付できます。ただし、データラベルはSVGposition要素であるため、leftおよびtopCSSプロパティに加えられた変更を完全に無視します。

代わりに、<g>ラベルをラップする要素はtransform属性を公開します。

<g zIndex="1" transform="translate(9, 152)">
    <!-- data label content -->
</g>

draggableウィジェット（低レベルのドラッグイベントを抽象化するため非常に便利です）を引き続き使用し、ドラッグイベントハンドラーtransformでデータラベルラッパーの属性を更新できます。ドラッグ座標は相対的であるため、元の属性を解析し、結果の座標を原点として使用する必要があります。transform

現在、すべてのラベルラッパーは、それ自体がhighcharts-data-labelsクラスで装飾されたグループの子です。これは私たちに良い出発点を提供するので、次のように書くことができます：

$(".highcharts-data-labels").children().filter(function() {
    var $this = $(this);
    // Parse original translation.
    var coords = $this.attr("transform")
                      .match(/translate\((-?\d+),\s*(-?\d+)\)/);
    if (coords) {
        // Associate origin with element.
        return $this.data("origin", {
            x: +coords[1],
            y: +coords[2]
        });
    } else {
        // Parsing failed, reject element.
        return false;
    }
}).draggable({
    drag: function(event, ui) {
        var $this = $(this);
        // Fetch back origin.
        var origin = $this.data("origin");
        // Update current transform.
        $this.attr("transform", "translate("
            + (origin.x + ui.position.left) + ", "
            + (origin.y + ui.position.top) + ")");
    }
});

更新されたフィドルはここにあります。

上記のコードに関するいくつかの注意：

  • filter（）は、 each（）の代わりに使用されます。これにより、完全に失敗したり、ハンドラーtransformの計算にガベージをフィードしたりする代わりに、属性を解析できなかった（決してわからない）要素をフィルターで除外できます。drag

  • SVGフラグメントの属性を変更しているという事実を強調するために、 prop（）の代わりにattr（）が使用されます。prop()おそらくまったく同じように機能するので、それはスタイルと個人的な好みの問題にすぎません。

最後に、注意点：今のところFirefoxでしかテストできませんが、mousedown一部のラベルでイベントをトリガーするのは非常に難しいようです。特に、曲線の一部とデータチップがスペースを奪い合う「混雑した」エリアではそうです。データラベルラッパーの属性を微調整してzIndexも、あまり効果はありませんでした。複数回クリックすると役立つ場合があります。これがすべてのブラウザで一貫している場合は、おそらく追加のソリューションを考案する必要があります（透明なオーバーレイ、または単にmousedownデータポイント自体からデータラベルにイベントを中継する）。

于 2012-07-08T11:24:44.893 に答える
0

作業中のjsFiddle 

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                events: {
                    //Here I'm able to move the labels by using the click and shift-click. 
                    //I wish to do this by dragging
                    click: function(event) {
                        var current_y = event.point.dataLabel.attr('y');                        
                        if(event.shiftKey) {
                            var new_y = current_y + 2;
                            event.point.dataLabel.attr({y: new_y});
                        } else {
                            var new_y = current_y - 2;
                            event.point.dataLabel.attr({y: new_y});                            
                        }
                    }
                }                    
            }
        },
        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]
        }]
    });

    //Second attempt to grab a point. Works for chaning attributes
    var point = chart.series[0].data[0].dataLabel;


} , function(chart){

});

 $(function() {
   console.log(chart) ;
       $( "#draggable" ).draggable()
       .text(chart.series[0].data[0].y + 'drag and drop me     ');
     });

</p>

于 2012-07-08T21:08:53.047 に答える