获取 tickpositions highcharts

Question

我有一个 highcharts 散点图，我试图在 freemarker 模板中获取 x 和 y tickPositions，特别是第一个和最后一个。例如，我会在 x-y 轴的交点处得到 [-10，-10]（左下角），在相对侧的交点处得到 [30,40]（右上角），其中 xAxis 刻度是[-10,0,10,20,30] 和 yAxis 刻度为 [-10,0,10,20,30,40]

我想要这些点，这样我就可以在散点图上绘制一条从下下角到右上角的对角线。线系列应如下所示：

series: [
        {
            type : 'line',
            <#--diagonal line-->
            data :[[-10,-10], [30,40]], // to be calculated dynamically
            lineWidth: 0.5,
            marker : {
                enabled : false
            }
        },
        {
            color: 'rgb(0,85,152)',
            data: [[2,3],[6,7],[8,9]]
        }
]

目前的问题是无法得到[-10,-10],[30,40]个数据点。这甚至可能是我想知道的。非常感谢任何帮助！

Answer 1

轴上有 getExtremes() 函数。例如：

var extremes = $('#container').highcharts().yAxis[0].getExtremes();

这是doc, and here is a demo fiddle

这是您想要实现的目标吗？

编辑

在您的 fiddle 示例之后，我更加了解您的需求。这里是 updated fiddle

  var chart = $('#container').highcharts();
  var extremeY = chart.yAxis[0].getExtremes();
  var extremeX = chart.xAxis[0].getExtremes();

  var lineSeries = {
      type: 'line',
      data: [
        [extremeX.min, extremeY.min],
        [extremeX.max, extremeY.max]
      ],
      lineWidth: 0.5,
      lineColor: 'rgb(0,0,0)',
      marker: {
        enabled: false
      }
    };

  chart.addSeries(lineSeries);

我创建了一个具有线系列属性的对象。使用 min 和 max（不是 dataMin 和 dataMax）来自 getExtremes() 返回的对象的属性，您可以获得所需的结果。

编辑 2

您可以将此代码放在图表的 load 事件中。它是图表加载完成后调用的回调。在这里你可以使用this来参考图表：

 $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          var extremeY = this.yAxis[0].getExtremes();
          var extremeX = this.xAxis[0].getExtremes();

          var lineSeries = {
            type: 'line',
            data: [
              [extremeX.min, extremeY.min],
              [extremeX.max, extremeY.max]
            ],
            lineWidth: 0.5,
            lineColor: 'rgb(0,0,0)',
            marker: {
              enabled: false
            }
          };

          this.addSeries(lineSeries);
        }
      },
      //...
});

这是new updated fiddle

Answer 2

因为你只需要一条对角线路径，那么你可以使用 renderer

添加它

示例：http://jsfiddle.net/cr7gq4st/

function diagonal() {
    var chart = this,
            ren = chart.renderer,
        diag = chart.diag,
        attrs = {
            'stroke-width': 0.5,
          stroke: '#000',
          zIndex: 1
        },
        topR = {
            x: chart.plotLeft + chart.plotWidth,
          y: chart.plotTop
        },
        bottomL = {
            x: chart.plotLeft,
          y: chart.plotTop + chart.plotHeight
        },
        d = 'M ' + bottomL.x + ' ' + bottomL.y + ' L ' + topR.x + ' ' + topR.y;
    if( !diag ) { //if doesn't exist, then create
        chart.diag = ren.path().attr(attrs).add();
    }
    chart.diag.attr({d:d});
}

获取 tickpositions highcharts

get tickpositions highcharts

highcharts

freemarker

scatter-plot