2017-02-02 4 views
0

Я создал диаграмму столбцов HTML5 (highchart) в Jaspersoft Studio, но ярлыки xAxis могут быть довольно длинными и перекрывать легенду, которая выглядит ужасно. Стандарты компании диктуют, что легенда должна быть внизу, а метки повернуты на 270 градусов, чтобы они были вертикально. Это означает, что я не могу переместить легенду или повернуть метки, к сожалению, поэтому я хотел бы сделать так, чтобы метка просто отрезала по определенной длине и только частично отображалась, чтобы предотвратить ее совпадение с легендой, когда она слишком длинная.Jaspersoft Studio html5 chart (highchart) xAxis label overflowing

Этой страница содержит список всех свойств, которые могут быть применены к меткам XAxis:

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

я попытался с помощью свойства переполнения перечисленного там, но это только кажется, относится к меткам внутри участок площадь т.е.

xAxis 
    labels 
      overflow:false 

Так ли кто-нибудь знает, как я могу ограничить длину этикетки XAxis, чтобы предотвратить его перекрытие легенды под ним?

ответ

0

Я ничего не знаю о 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/

0

Перейти Схему Свойства> Показать дополнительные свойства и добавить новое свойство xAxis.labels.format и установить это использовать выражение с стоимость имущества ('My Text').substring(0, 5)

Переведите «Мой текст» для своего $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>