1

2 つのシリーズとその交点があります。交点に中心があるチャートに楕円 (楕円) を配置したいと考えています。楕円の半径は、軸単位で設定して、各軸の関心領域を表示する必要があります。

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]
        ]
      }
    ],
})

プログラムで交差点に楕円を描き、ズームを機能させるにはどうすればよいですか?

4

3 に答える 3

2

円や線などを描くにはSVGRendererが使えます。しかし、楕円を描く方法はありません。ただし、角を丸くしたrect()は使用できます。

次のコードを使用して、ポイント (100, 200) px、水平半径 20 px、垂直半径 10 px の楕円を描画できます。

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

x、y、および半径を軸単位で指定するには、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();
};

最後に再描画イベントを使用して、ズーム後に楕円を再描画できます。

$(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-08T06:38:04.820 に答える