Question

我在Jaspersoft Studio中创建了一个HTML5（高级图）柱形图，但xAxis标签可能很长，并且与看起来很糟糕的图例重叠。公司标准规定图例必须位于底部，标签旋转270度，因此它们是垂直的。这意味着我不能移动图例或不幸地旋转标签，所以我想让标签在一定长度后切断，并且只是部分显示以防止它与图例重叠太长时间。

此页面包含可应用于xAxis标签的所有属性的列表：

http://api.highcharts.com/highcharts/xAxis.labels

我尝试过使用那里列出的Overflow属性，但这似乎只与绘图区域内的标签有关，即：

xAxis
     labels
           overflow:false

所以有人知道我可以限制xAxis标签的长度以防止它与下面的图例重叠吗？

Answer 1

我对jaspersoft-studio一无所知。所以，我不确定这会对你的情况有效。

但是，使用直接HighCharts，您可以为标签启用useHTML，然后在css中设置标签宽度。

使用Javascript：

Highcharts.chart('container', {
    chart: {
        marginBottom: 80
    },
    xAxis: {
        categories: ['Long name 1', 'longer name number 2', 'this one is really really really long', 'Kinda long, but not longest', 'short', 'long name that is long', 'I think you get the point', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: {
            rotation: 45,
            useHTML:true
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

CSS：

.highcharts-axis-labels span{ 
  width:30px;
}

http://jsfiddle.net/0jwf9nb6/1/

Answer 2

转到图表属性＆gt;显示“高级属性”并添加新属性xAxis.labels.format并将其设置为使用具有属性值的表达式 ('My Text').substring(0, 5)

换掉＆＃39;我的文字＆＃39;对于您$V{}或$F{}或您正在使用的任何其他值作为xAxis标签，并将子字符串限制为最适合您的图表。

或者通过添加以下代码，通过源编辑器将此直接添加到图表设置中 <hc:chartSetting name="default">例如：

<hc:chartProperty name="xAxis.labels.format">
    <hc:propertyExpression><![CDATA[('My Text').substring(0, 5)]]></hc:propertyExpression>
</hc:chartProperty>

Jaspersoft Studio html5图表（高图）xAxis标签溢出

2 个答案: