highcharts線沒有完全繪製

Question

我有一個柱形圖結合整個圖表中的線條繪製。 將圖表容器的寬度減小到小於357像素的值時，水平線只會畫​​半邊而不是全角。

chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'chartcontainer', 
       defaultSeriesType: 'column', 
       borderRadius:0, 
       marginRight: 22, 
       marginBottom: 140 
      }, 
      title: { 
       text: 'test norm', 
       align: 'left' 
      }, 
      xAxis: [{ 
       title: { 
        text: 'x', 
        style: { 

        } 
       }, 
       categories: ['2008','2009','2010','2011','2012'], 
       labels: { 
        style: { 
        } 
       } 
      }, 
      { //secondary xAxis for range and norm values 
       gridLineWidth: 0, 
       labels:{ 
        enabled:false 
       }, 
       lineWidth:0, 
       tickWidth:0, 
       opposite: true, 
       minPadding:0, 
       maxPadding:0 
      } 
      ], 
      yAxis: { 
       title: { 
        text: 'y', 
        style: { 
        } 
       }, 
       labels: { 
        style: { 
        } 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'left', 
       verticalAlign: 'bottom', 
       width:700, 
       borderRadius: 0, 
       shadow:false, 
       floating:true,   
       borderWidth: 0         
      }, 
      navigation: { 
       buttonOptions: { 
        enabled: false 
       } 
      }, 
      tooltip: { 
       borderRadius: 0, 
       borderWidth: 1, 
       backgroundColor: '#FFFFFF', 
       shadow: false, 
       style: { 
        font: 'bold 11px Arial, Verdana, sans-serif', 
        fontWeight: 'bold' 
       },       
       formatter: function() { 
         return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>'; 
       } 
      }, 
      plotOptions: { 
       column: { 
        dataLabels: { 
         enabled: false 
        }, 
        shadow: false 
       } 
      }, 
      series: [{ name: 'A', shadow: false, data: [8,2,8,4,6] },{ name: 'B', shadow: false, data: [1,4,2,3,4] },{ name: 'C', shadow: false, data: [4,16,8,12,16] },{ name: 'E', shadow: false, data: [8,4,6,8,2] },{ 
type:'line', 
name:'Norm', 

data:[ 
    { 
     y:10.000000,    
     x:0.000000, 
     dataLabels: { 
      enabled: false, 
      align: 'left', 
      formatter:function(){return 'Norm: ' + this.y;}, 
      style: {fontWeight:'bold'} 
     }, 

    }, 
    { 
     y:10.000000, 
     x:1.000000, 
     dataLabels: { 
      enabled: true, 
      align: 'right', 
      formatter:function(){return 'Norm: ' + this.y;}, 
      style: {fontWeight:'bold'} 
     }, 
    } 
], 
color: '#01A1EB', 
lineWidth:1, 
dashStyle:'Solid', 
shadow: { 
    opacity:0.1 
}, 
enableMouseTracking:false, 
marker:{enabled:false}, 
xAxis:1, 
showInLegend: true 

}] }）;

看到我的jsfiddle例如： 完全畫的直線：

http://jsfiddle.net/ramon_ackermann/WwSbT/7/

線只有一半： http://jsfiddle.net/ramon_ackermann/WwSbT/8/

任何想法可能會導致這樣？

乾杯。

Answer 1

情節主線將是我的首選方案爲好。

如果你需要它是出於某種原因一個系列，但是，你可以做這樣的：

1）-0.5，最大x值設定在4.5 2線的最小x值）設定x軸分鐘，在0和最大值在4 3）忘記二次x軸

http://jsfiddle.net/jlbriggs/WwSbT/10/

for the x axis: 
xAxis: [{ 
    min:0, 
    max:4, 
}] 

and then in the data: 
... 
    y:10.000000,    
    x:-0.5, 
... 
    y:10.000000, 
    x:4.5, 

第二x軸似乎是問題的一部分。如果您隱藏了規範系列，然後重新顯示它，它會正確填充繪圖區域。

Answer 2

使用的plotline在y軸上，而不是：http://jsfiddle.net/paranoir/WwSbT/9/

plotLines: [{ 
    color: '#FF0000', 
    width: 1, 
    value: 10 
}]