Question

我需要在具有日期时间轴的图表上绘制任意路径：

xAxis: {
  type: 'datetime'
}

我试图使用chart.renderer.path('M', x, y)。我可以轻松确定y值，但如何指定x？

这是一个简单的例子（基于Highcharts＆＃39;小提琴，复制到http://jsfiddle.net/ykcff0sL/3/）。如果你看一下代码的最后几行，我想在图表上添加一行：

// add line from January to April
chart.renderer.path(
    'M', new Date(2014, 0, 1), 0.8,
    'L', new Date(2014, 3, 1), 0.9)
    .attr({
        'stroke-width': 2,
        stroke: 'red'
    })
    .add()

这不起作用。我也尝试使用toPixels无效。

   'M', chart.xAxis(0).toPixels(new Date(2014, 0, 1)), 0.8,
   'L', chart.xAxis(0).toPixels(new Date(2014, 3, 1)), 0.9)

你可以修复jsfiddle示例，或告诉我如何操作吗？

Answer 1

Renderer.path需要一系列坐标。 chart.xAxis也是一个轴数组，而不是函数。

要确定特定坐标的x和y，请使用xAxis/yAxis.toPixels()

      var xAxis = chart.xAxis[0];
  var yAxis = chart.yAxis[0];

  chart.renderer.path([
      'M', xAxis.toPixels(new Date(2014, 0, 1)), yAxis.toPixels(0.8),
      'L', xAxis.toPixels(new Date(2014, 3, 1)), yAxis.toPixels(0.9)
    ])
    .attr({
      'stroke-width': 2,
      stroke: 'red'
    })
    .add()

示例：http://jsfiddle.net/ykcff0sL/4/

Highcharts - 在日期时间轴的图表上绘制路径

1 个答案: