2013-07-25 80 views
1

我参加了一个样品的jsfiddle和修改在这里只是为了证明什么,我经历了一个样本: http://jsfiddle.net/pMwuv/Highcharts - 数据标签切断

这里是我的实际datalabel代码如下所示:

dataLabels: { 
enabled: true, 
align: 'left', 
verticalAlign: 'top', 
style: { 
    color: 'black' 
}, 
formatter: function() { 
    if (this.x == 19) { 
     return this.y + '<br>units left'; 
    }; 
} 
}  

我的面积图上有最后一个数据标签被切断。有没有办法增加容器的宽度或添加某种类型的填充以便完整的标签显示?

仅更改标签的x和y位置将不适用于我的面积图。我定制了自己的图表,以便只有图表的最后一点才有数据标签,而且我希望它与最后一点的右侧对齐,而不是在图表内。

但是,如果我们可以得到上面的示例小提琴工作,那么相同的解决方案应该为我工作。

回答

3

您可以将marginRight添加到chart这个样子:

chart: { 
      renderTo: container, 
      width: 550, 
      marginRight: 35 
} 

jsFiddle

+0

marginRight和spacingRight都可以工作!有没有一种情况可以更好地使用这个或另一个? – Gabriel

+1

是的,有些情况'spacingRight'更好。例如,当你有右边的传说。 'spacingRight'是图表右边缘与整个_content_(包括图例)之间的空格。 'marginRight'是图表的右边缘和_plot area_之间的余量。因此,如果您将marginRight应用于右侧图例的图表,您将在图例和绘图区域之间留出空间。但在你的情况下,这并不重要。 –

+0

感谢您的解释! – Gabriel

0

这不是一个直接解决方案,但我建议你把标签在Y轴:

yAxis: { 
     title: { 
      text: 'Units left' 
     } 
    }, 

,并删除其他属性,只留下enabled: true

plotOptions: { 
     series: { 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 

See the fiddle