Highchartグラフにallipse（oval）を描く方法

私は2つの系列と交点を持っています。交差点を中心とした図の上に楕円（楕円）を描きたい。各軸の関心領域を表示するには、楕円の半径を軸単位で設定する必要があります。Highchartグラフにallipse（oval）を描く方法

Highcharts.chart('container', { 
    series: [ 
     // first series 
     { 
     name: 'IPR', 
     data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]] 
     }, 
     // second series 
     { 
     name: 'VLP', 
     data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]] 
     }, 
     // intersection 
     { 
     name: 'Operating point', 
     data: [ 
      [22.42, 23.35] 
     ] 
     } 
    ], 
})

どのようにしてプログラムで楕円を交差点に描画して拡大表示できますか？

出典

2017-11-08 Anton Rybalko

あなたはHighchartsで、他のSVG要素を作成するためにRenderer.createElementを使用することができます。@Anton Rybalkoが提案されているよう

this.renderer.createElement('ellipse').attr({ 
     cx: 60, 
     cy: 60, 
     rx: 50, 
     ry: 25, 
     'stroke-width': 2, 
     stroke: 'red', 
     fill: 'yellow', 
     zIndex: 3 
    }).add();

軸の単位に変換するためのtoPixelsを使用しています。

ライブデモ：http://jsfiddle.net/kkulig/ds6aj5yp/

APIリファレンス：

出典

2017-11-08 11:28:15

これは、rectを使用するよりも優れています。 –

円を描くには、線などSVGRendererを使用できます。しかし、楕円を描く方法はありません。ただし、角が丸いrect()を使用することができます。軸の点でのx、yおよび半径を指定する

chart.renderer.rect(100, 100, 20, 10, '50%') 
    .attr({ 
     'stroke-width': 1, 
     'stroke': 'green', 
     'fill': 'yellow', 
     zIndex: 0 
    }) 
    .add();

：次のコード

は（100、200）PX、横半径20 pxと垂直半径10ピクセル点で楕円を描くために使用することができますまた、Axis.toPixels()のようなものを使用できます。我々はピクセルにポイント（22.42、23.35）を変換する必要がある場合、それは次のように行うことができます。

var x = chart.xAxis[0].toPixels(22.42), 
    y = chart.yAxis[0].toPixels(23.35)

だから楕円を描くように機能するようになります：

var drawEllipse = function(chart, x, y, xr, yr) { 
    var x1 = chart.xAxis[0].toPixels(x-xr) 
    var x2 = chart.xAxis[0].toPixels(x+xr) 
    var y1 = chart.yAxis[0].toPixels(y-yr) 
    var y2 = chart.yAxis[0].toPixels(y+yr) 
    $('.' + rectClass).remove() 
    chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%') 
    .attr({ 
     'stroke-width': 1, 
     'stroke': 'green', 
     'fill': 'yellow', 
     'zIndex': 0 
    }) 
    .add(); 
};

Finnaly redrawイベントが再描画するために使用することができますズーム後の楕円：

$(function() { 
    var drawEllipse = function(chart, x, y, xr, yr) { 
    // get pixel coordinates of rect 
    var x1 = chart.xAxis[0].toPixels(x-xr) 
    var x2 = chart.xAxis[0].toPixels(x+xr) 
    var y1 = chart.yAxis[0].toPixels(y-yr) 
    var y2 = chart.yAxis[0].toPixels(y+yr) 
    // remove previous ellipse 
    var rectClass = 'operating-point-ellipse' 
    $('.' + rectClass).remove() 
    // draw ellipse using rect() 
    chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%') 
     .attr({ 
     'stroke-width': 1, 
     'stroke': 'green', 
     'fill': 'green', 
     'fill-opacity': 0.2, 
     'zIndex': 0 
     }) 
     .addClass(rectClass) 
     .add(); 
    }; 

    $('#container').highcharts({ 
    chart: { 
     events: { 
     redraw: function() { 
      drawEllipse(this, 22.42, 23.35, 6, 3); 
     }, 
     load: function() { 
      drawEllipse(this, 22.42, 23.35, 6, 3); 
     } 
     } 
    }, 
    //... 
    }); 
});

がjsFiddleに完全なコードを参照してください：http://jsfiddle.net/arybalko/rcct2r0b/

出典

2017-11-08 06:38:04

Highchartグラフにallipse（oval）を描く方法

答えて

関連する問題