Highcharts - 强制绘制线消耗可用宽度？

我们的设计师已要求我们绘制堆积面积图，以便绘图线消耗可用图表宽度的100％，而不是在第一个/最后一个刻度线处开始/停止。这是由我们的设计师提供了样机，说明我们正在努力实现：Highcharts - 强制绘制线消耗可用宽度？

http://oi50.tinypic.com/25s2bzm.jpg

目前图表呈现如下，并指出，该地块线不消耗图表的宽度：

$(function() { 
var chart; 
$(document).ready(function() { 
    Highcharts.setOptions({ 
     colors: ['#1FA5FF', '#9BD237', '#E6673B'] 
    }); 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'area' 
     }, 
     title: { 
      text: null 
     }, 
     exporting: { 
      enabled: false 
     }, 
     legend: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     xAxis: { 
      categories: ['Mar 2012', 'Apr 2012', 'May 2012', 'Jun 2012', 'Jul 2012', 'Aug 2012', 'Sep 2012'], 
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      } 
     }, 
     yAxis: { 
      title: { 
       text: null 
      } 
     }, 
     plotOptions: { 
      area: { 
       fillOpacity: 0.3, 
       stacking: 'normal', 
       lineWidth: 3, 
       marker: { 
        lineWidth: 3, 
        enabled: false 
       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [30, 26, 18, 35, 30, 28, 40, 31] 
     }, { 
      name: 'Jane', 
      data: [40, 35, 37, 33, 30, 42, 30, 26] 
     }, { 
      name: 'Bob', 
      data: [26, 33, 28, 20, 35, 33, 35, 20] 
     }] 
    }); 
});

我已经通过API望去，四处搜寻，但我没发现（或者也许错过了）我必须设置来实现这一假设它甚至有可能的选项。预先感谢您的帮助。

更新：解决的办法是设置xAxis的最小和最大属性，所以我更新了上述内容以反映这一点。但是，这会截断图表数据，因为它排除了第一个和最后一个数据点，所以为了解决这个问题，我将虚拟值添加到类别和series.data数组中，注意到数据是一个对象，我通过Ajax返回建立图表：

data.categories.unshift(''); 
data.categories.push(''); 
for (var i = 0, len = data.series.length; i < len; i++) { 
    data.series[i].data.unshift(0); 
    data.series[i].data.push(0); 
}

在x轴的最小/最大，然后设置如下：

xAxis: { 
    min: 1, 
    max: data.categories.length - 2 // 2nd to last index 
}

来源

2013-03-22 Markus Hay

JSfiddle下面的答案（它的作品）：http://jsfiddle.net/8pmVK/1/ – nickhar 2013-03-22 15:40:41

谢谢，这绝对有帮助，虽然它有一个不需要的副作用。通过将min设置为1并将max设置为5，我失去了第一个和最后一个数据点，但是我可以通过将虚拟条目添加到类别的开始和结尾以及我的series.data数组中来解决这个问题。 – 2013-03-22 16:33:26

你需要找到正确的最小/最大为您x轴。在你的例子中：

xAxys: { 
... 
min: 1, 
max: 5 
}

来源

2013-03-22 15:37:32 Luca

你可以在最小和最大值中使用小数。

在你的情况，0.5分钟和6.5最大值出现这样的伎俩： http://jsfiddle.net/jlbriggs/8pmVK/2/

min:0.5, 
max:6.5,

使用整数总是要么离开空间或截断。这可以动态完成，如果需要调用getExtremes（），相应地调整最小值和最大值，然后调用setExtremes（）

来源

2013-03-25 20:30:17 jlbriggs

我确信上述项目已经完成，但也可以使用Highstocks代替Highcharts相同的许可证），并添加一个滚动条，如下所示：[http://jsfiddle.net/8pmVK/]。

 scrollbar: { 
      enabled: true 
     },

此外，Highstock包括Highcharts的所有功能。

来源

2015-05-26 21:23:38

Highcharts - 强制绘制线消耗可用宽度？

回答

相关问题