2

我经常有图表需要像花括号这样的设计元素来引起注意以引起对图表中范围或比较的注意，例如图表末尾两点的 y 差。

我的第一个想法是，这将是 Highcharts RendererAPI 的工作。chart.renderer.image(...) 加载图表，并运行一个回调，通过或类似的方式添加图像（或线条、形状等） 。

这就是我开始采用的方法，但我只是想念如何在回调中获取图表数据点的坐标。这是下面代码的工作代码笔。不起作用的是没有逻辑将其正确放置在画布上（假设我希望支架从最终顶点到最终底点）

$('#container').highcharts({
    data: { table: document.getElementById('datatable') },
    chart: { type: 'line' }, 
    title: { text: 'Data extracted from a HTML table in the page'
    }
}, function(chart){

  var img = 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Curly_bracket_right.svg/30px-Curly_bracket_right.svg.png';

  // How can I populate these values?
  var x = 0; // should programmatically get x-position of last point
  var y = 0; // should programmatically get y-position of last point
  var h = 100; // should programmatically get distance between y-position of top and bottom points
  var w = 50;

  chart.renderer.image( img, x, y, w, h ).add();
});

有没有一种直接的方法来填充这些值？还是有更好的方法来完全做到这一点？

4

1 回答 1

1

要获得您想要的位置，您可以使用 highcharts 在其 API 中提供的一些方法。

toPixels()、toValue() 等方法将帮助您根据图表人口统计学改变所需的位置。

请参考他们的api

toPixels() : http://api.highcharts.com/highcharts#Axis.toPixels()

toValue() : http://api.highcharts.com/highcharts#Axis.toValue()

希望使用它可以解决您的定位要求

于 2013-11-14T12:08:00.963 回答