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

Question

我正在根据此参考图片制作自定义样式的线/面积图：

我已经实现了很多，但是，我正在努力将线条扩展到图表的边缘。

这是我的小提琴：http://jsbin.com/ePilePe/3/edit?js,output

正如你在图像中看到的那样，第一个点，X轴上的最后一个点有一条光线延伸到图表的末尾，在我的小提琴中没有这样的东西。

我一直在深入研究API，文档很长一段时间，但找不到任何相关信息。

我将如何实现这种行为？

Answer 1

经过一番摆弄后，我在Highcharts周围试图获得预期的效果。

这是我的小提琴：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(' ');
  }
};

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

如果有人对此问题有更“用户友好”的解决方案，我希望看到它。

Answer 2

我之前的评论错过了这是一个分类轴的事实。

在这种情况下，我只会影响最小值和最大值。 如果您有一定数量的类别，则可以明确设置（在这种情况下，min = 0.5，max = 5.5）。

如果它们是动态的，您可以轻松计算它们：

var cats=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
var xMin = 0.5;
var xMax = (cats.length -1.5);

完整示例：

• http://jsfiddle.net/jlbriggs/Q46B8/

如果您没有使用分类轴，可以按照原始评论中的建议进行操作：

将minPadding：0和maxPadding：0添加到xAxis属性中。如果您的数据没有以刻度线结束，那么您还需要添加startOnTick：false和endOnTick：false

Answer 3

不要对这种情况使用类别 - 类别会阻止这种行为。例如，使用带有标签格式化程序的线性轴，请参阅：http://jsbin.com/EcupIPO/1/

var cat = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

$("#chart").highcharts({
  xAxis : {
    labels :{ 
      formatter: function () {
        return cat[this.value];
      }
    } 
  }
});