javascript - 将折线图/面积图线延伸到图表边缘

Question

我正在根据此引用图像制作自定义样式的折线图/面积图:

我已经实现了大部分，但是，我正在努力处理延伸到图表边缘的线条。

这是我的 fiddle :http://jsbin.com/ePilePe/3/edit?js,output

正如您在图像中看到的那样，X 轴上的第一个点和最后一个点有一条射线延伸到图表的末尾，而在我的 fiddle 中没有这样的东西。

我已经研究 API 和文档很长时间了，但找不到任何相关信息。

我将如何实现这种行为？

Answer 1

经过一些摆弄之后，我绕过了 Highcharts 以获得预期的效果。

这是我的 fiddle :http://jsbin.com/upUFIbO/1/ .

我所做的是，添加以下内容作为 load 和 redraw 事件的回调:

/**
 * Helper that extends area and lines to the left and right plot edges.
 *
 * Has to be invoked with .call(), giving Highchart as the this reference
 * and Highchart event as the second parameter.
 * 
 * @return void
 */
var edgeExtend = function(e)
{
  for (var l = this.series.length, i = 0; i< l; i++)
  {
    // Get current series.
    var series = this.series[i];

    // Get inner-chart box.
    var box = this.plotBox;

    // Take areas path.
    var areaPath = series.areaPath;

    // Add start point.
    // Right after the first element (M).
    areaPath.splice(1, 0, 0, areaPath[2], 'L');

    // Add Last points upper area end.
    // Remove penultimate point.
    // Replace it with a new point reaching to the width of chart and growing to the height of last element.
    // And add the bottom-right corner.
    areaPath.splice(-6, 3, 'L', box.width, areaPath[areaPath.length - 7], 'L', box.width, box.height);

    // Make the last points X be zero - that will result in bottom left corner.
    areaPath[areaPath.length - 2] = 0;

    // Replace value (redraw).
    series.area.element.attributes.d.value = areaPath.join(' ');

    var graphPath = series.graphPath;

    // Add start point.
    // Right after the first element (M).
    graphPath.splice(1, 0, 0, graphPath[2], 'L');

    // Add end point.
    graphPath.push('L', box.width, graphPath[graphPath.length - 1]);

    series.graph.element.attributes.d.value = graphPath.join(' ');
  }
};

可能这不是最好的方法，但是，嘿，直接矢量路径操作不会出错。

如果有人对问题有更“用户友好”的解决方案，我很乐意看到。