ハイチャートでは、パンの在庫グラフに従わないsvg要素が手動で追加されました

Question

ハイストック/ハイチャートグラフでクリックイベントが発生しましたが、ラインやテキストの追加などのカスタム描画ツールが正常に追加されました。ここではその

$('#stockchart-canvas-container').on('click','svg',function(e){ 
     var svg = $('#stockchart-canvas-container svg')[0]; 
     var point= svg.createSVGPoint(), svgP 
     point.x = e.clientX 
     point.y = e.clientY 
     svgP = point.matrixTransform(svg.getScreenCTM().inverse()); 

     if(user.selected_tool=='line'){ 
      if(user.previous_x == undefined && user.previous_y == undefined) { 
       user.current_x = svgP.x 
       user.current_y = svgP.y 
       user.previous_x = 0 
       user.previous_y = 0 
       $('#stockchart-canvas-container').on('mousemove','svg',function(ev){ 
        var svg2 = $('#stockchart-canvas-container svg')[0]; 
        var point2= svg.createSVGPoint(), svgP2 
        point2.x = ev.clientX 
        point2.y = ev.clientY 
        svgP2 = point2.matrixTransform(svg2.getScreenCTM().inverse()); 
        $('#temp-line').remove() 
        stockchart.renderer.path(['M', 
             user.current_x, 
             user.current_y, 
             'L', 
             svgP2.x, 
             svgP2.y, 
             'Z', 
             ]).attr({'stroke-width':2,stroke:'#ccc',id:'temp-line'}).add(stockchart.seriesGroup) 
       }) 
      } else { 
       $('#stockchart-canvas-container').off('mousemove') 
       stockchart.renderer.path(['M', 
             user.current_x, 
             user.current_y, 
             'L', 
             svgP.x, 
             svgP.y, 
             'Z' 
             ]).attr({'stroke-width':2,stroke:'#ccc'}).add(stockchart.seriesGroup) 
       user.current_x=0 
       user.current_y=0 
       user.previous_x=undefined 
       user.previous_y=undefined 
      } 
     } else if (user.selected_tool=='text') { 
      $('#insert-text-modal').modal('show') 
      $('#accept-insert-text').on('click',function(){ 
       if($('#text-input').val()){ 
       stockchart.renderer.text($('#text-input').val(),svgP.x,svgP.y).add(stockchart.seriesGroup)  
       } 
       $(this).off('click') 
       $('#insert-text-modal').modal('hide') 
      }) 
     } 
    }) 

ためのコードは私の問題は、私は、グラフをパンやズームなどのラインとテキストが株価グラフをフォローしたいということです。どのように私はこれを行うことができます任意のアイデア？

Answer 1

テキスト/線が描かれた瞬間の座標値、つまり座標軸の座標を保持する必要があります。各チャートの再描画で、ライン/テキストの位置を変更する必要があります。新しいピクセル位置を計算する必要があります（axis.toPixelsで計算できます）。新しい値をライン/テキストに設定する必要があります。テキストの場合は、各セグメントを再計算する必要があるパス要素に対して、1点を計算する必要があります。

以下のコードを参照してください：ピクセルの値と値からのピクセルを計算するための

機能 - それはグラフのプロットエリアをオーバーフローした場合、テキストを隠すためのいくつかの基本的なロジックを含んでいる - それはあなたのニーズに応じて調整する必要があります。

function translate (x, y, chart, toPixels) { 
    const xAxis = chart.xAxis[0] 
    const yAxis = chart.yAxis[0] 
    let tx, ty, hide 

    if (toPixels) { 
    tx = xAxis.toPixels(x) 
    ty = yAxis.toPixels(y) 

    if (tx < xAxis.left || tx > xAxis.left + xAxis.width) { 
     hide = true 
    } else if (!hide && (ty < yAxis.top || ty > yAxis.top + yAxis.height)) { 
     hide = true 
    } 

    if (hide) { 
     tx = -9e7 
     ty = -9e7 
    } 
    } else { 
    tx = xAxis.toValue(x) 
    ty = yAxis.toValue(y) 
    }  

    return { x: tx, y: ty } 
} 

グラフ上をクリックすると、テキストが追加され、配列内に保持され、チャートの再描画が行われます。r - 項目を再配置します。

chart: { 
    events: { 
    load: function() { 
     this.drawnItems = [] 
    }, 
    click: function (e) { 
     const { x, y } = e 
     const text = this.renderer.text('custom text', x, y).add() 
     text.point = translate(x, y, this) 
     this.drawnItems.push(text) 
    }, 
    redraw: function() { 
     this.drawnItems.forEach(item => { 
     const { x, y } = item.point 
     item.attr(translate(x, y, this, true)) 
     }) 
    } 
    } 
}, 

ライブ例：http://jsfiddle.net/nsf67ro6/