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

Question

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

我已经实现了大部分，但是，我正在努力解决将线条延伸到图表边缘的问题。

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

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

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

我将如何实现这种行为？

Answer 1

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

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

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

Answer 2

经过一番摆弄后，我在 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 3

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

在这种情况下，我会简单地影响最小值和最大值。 如果您有固定数量的类别，则可以明确设置（在本例中，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