Question

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

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

这是我开始的方法，但我只是错过了如何在回调中获取图表数据点的坐标。这是以下代码的有效codepen。什么行不通的是没有逻辑可以在画布上正确放置（假设我希望括号从最终的顶点到最后的底点）

$('#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();
});

是否有直接的方法来填充这些值？或者有更好的方法完全做到这一点吗？

Answer 1

要获得您想要的位置，您可以使用其API中由highcharts提供的少数方法。

像toPixels（），toValue（）这样的方法将帮助您根据图表demogrphics改变您所需的位置。

请参考他们的api

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

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

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

Highcharts - 以编程方式在两个相关点之间绘制线条或图形

1 个答案: