问题描述
我有一张柱形图和横跨图表的线条图。
当将图表容器的宽度减小到小于357px的值时，水平线只会被拉到一半而不是全宽。
chart = new Highcharts.Chart（{
图表：{
renderTo：'chartcontainer'，
defaultSeriesType：'列'，
borderRadius：0，
marginRight：22，
marginBottom：140
}，
标题：{
text：'test norm'，
align：'left'
}，
xAxis：[{
title：{
text：'x'，
style：{
}
}，
类别：['2008'，'2009'，'2010'，'2011'，'2012']，
标签：{
style：{
}
}
}，
{//辅助xAxis范围和标准值
gridLineWidth：0，
标签：{
启用：false
}，
lineWidth：0，
tickWidth：0，
相反：true，
minPadding：0，
maxPadding：0
}
]，
yAxis：{
title：{
text：'y'，
style：{
}
}，
标签：{
style：{
}
}
}，
图例：{
layout：'vertical'，
align：'left'，
verticalAlign：'bottom'，
width：700，
borderRadius：0，
shadow：false，
floating：true，
borderWidth：0
}，
导航：{
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：{
列：{
dataLabels：{
启用：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]}，{
类型：'line'，
名称：'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，
d ataLabels：{
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示例：
完整绘制的行：
行只有一半：
为x轴：
xAxis：[{
min：0，
max：4，
}]
然后在数据中：
...
y：10.000000，
x：-0.5，
...
y：10.000000，
x：4.5，
第二个x轴似乎是问题的一部分。如果你隐藏了规范系列，然后重新显示它，它会正确填充绘图区域。
I have a column chart combined with a line drawing across the chart.When decreasing the width of the chart container to a value smaller than 357px the horizontal line is only drawn half way instead of the full width.
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
}] });
See my jsfiddle example here:The line fully drawn:
http://jsfiddle.net/ramon_ackermann/WwSbT/7/
The line only half way:http://jsfiddle.net/ramon_ackermann/WwSbT/8/
Any ideas what might cause this?
Cheers.
Plotline would be my preferred option as well.
If you need it to be a series for some reason, however, you can do it like this:
1) set your min x value for the line at -0.5, max x value at 4.52) set xAxis min at 0 and max at 43) forget about the secondary x axis
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,
The second x axis appears to be part of the problem. If you hide the norm series, and then reshow it, it fills the plot area properly.
这篇关于highcharts线没有完全绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！