延长线/区域图线图表边缘

Question

我正在一个自定义风格的线/区域图上，基于这个参考图像：

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

这里是我的小提琴：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

不要使用类别这种情况下类别将阻止该行为。例如使用带有标签格式直线轴，请参阅：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 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属性。如果您的数据没有以tickmark结尾，那么您还需要添加startOnTick：false和endOnTick：false