2015-08-10 4 views
0

Я добавляю диаграмму в свое приложение AIR. Вот как:Flex/Adobe Air - легенда диаграммы/Оси шрифты слишком маленькие

private function CountersChart(container:VGroup):void { 

     var arr:Array = []; 
     var dt:Date = new Date(); 
     var counters:Counters = Constants.srv.getCounters(dt.fullYear, dt.month); 
     var goals:ArrayCollection = Constants.srv.getGoals(); 

     var index:int = 0; 
     var found:Boolean = false; 
     var now:Date = new Date(); 

     while (!found) { 
      var goal:Goals = goals[index]; 
      if (now.month+1==goal.month && now.fullYear==goal.year) { 
       found=true; 
       break; 
      } else 
       index++; 
     } 

     arr.push({label:"Calls", x:"Calls", y:counters.phone, y1:goals[index].calls}); 
     arr.push({label:"Text", x:"Text", y:counters.sms, y1:goals[index].sms}); 
     arr.push({label:"Email", x:"Email", y:counters.email, y1:goals[index].emails}); 
     arr.push({label:"Marketing Tools", x:"Marketing Tools", y:counters.marketing, y1:goals[index].sendMarketingTools}); 
     arr.push({label:"Meetings", x:"Meetings", y:counters.meeting, y1:goals[index].meetings}); 
     arr.push({label:"Home Presentations Invites", x:"Home Presentations Invites", y:counters.homePresentationInvite, y1:goals[index].homePresentations}); 
     arr.push({label:"Business Presentation Invites", x:"Business Presentation Invites", y:counters.businessPresentationInvite, y1:goals[index].businessPresentations}); 

     // Create a column chart object 
     var stackedColumnChart:ColumnChart = new ColumnChart(); 
     stackedColumnChart.dataProvider = arr; 
     stackedColumnChart.showDataTips = true; 
     stackedColumnChart.dataTipFunction = myDataTipFunction; 
     stackedColumnChart.percentWidth = 100; 

     // Set the horizontal axix category 
     var xAxis:CategoryAxis = new CategoryAxis(); 
     xAxis.categoryField = "x"; 
     stackedColumnChart.horizontalAxis = xAxis; 

     // ColumnSet.series is an array which contains 
     // an array of ColumnSeries objects. 
     var columnSet:ColumnSet = new ColumnSet(); 
     columnSet.type = "stacked"; 

     // Each item in seriesDetails becomes a different segment of 
     // a column in the stacked chart i.e. each item represents a series. 
     var seriesDetails:ArrayCollection = new ArrayCollection([ 
      {YField:"y", DisplayName:"Actual"}, 
      {YField:"y1", DisplayName:"Planned"}, 
     ]); 

     // Create a ColumnSeries, and an array to be 
     // populated with dynamically generated columnSeries objects 
     var columnSeries:ColumnSeries; 
     var seriesArray:Array = new Array(); 
     var xr:AxisRenderer = new AxisRenderer(); 
     xr.setStyle("fontSize",40); 
     //columnSeries.verticalAxis = xr; 
     // Generate an array of ColumnSeries objects 
     // which are then be applied to the ColumnSet series. 
     for(var i:int = 0; i < seriesDetails.length; i++){ 
      columnSeries = new ColumnSeries(); 
      columnSeries.yField = seriesDetails[i].YField; 
      columnSeries.displayName = seriesDetails[i].DisplayName; 
      columnSeries.setStyle("fill",fillsArray[i]); 
      seriesArray.push(columnSeries); 
     } 
     columnSet.series = seriesArray; 

     // c.series could take an array of column sets 
     // for displaying mixed charts i.e. c.series = [columnSet1, columnSet2]; 
     stackedColumnChart.series = [columnSet];  
     //stackedColumnChart.showAllDataTips(); 
     stackedColumnChart.showDataTips = true; 
     stackedColumnChart.id = "chart"; 
     var legend:Legend = new Legend(); 
     legend.direction = "horizontal"; 
     legend.setStyle("fontSize",30); 
     legend.dataProvider = stackedColumnChart; 

     stackedColumnChart.setStyle("horizontalAxisRenderers", xr); 
     stackedColumnChart.addEventListener(MouseEvent.CLICK,function(event){return}); 

     //Add chart to the display list. 
     container.addElement(stackedColumnChart); 
     container.addElement(legend);    
    } 

Результат рисует диаграмму красиво НО: размер шрифта легенды, а ось х/у тааак мало, даже не могу прочитать их.

Я попытался установить legend.setStyle («FONTSIZE», фс) или установить легенду MinHeight (как предложено здесь: Flex chart labels way too small, how to resize axis?

но безрезультатно :-(

Как может Я изменить размер шрифта для них

Благодаря

+0

см. Ответ ниже и принять, если он сработает для вас. –

ответ

1

Вы должны предоставить CSS для класса LegendItem и класса ColumnChart, а затем подберут стиль для него:?

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 

    mx|LegendItem 
    { 
     fontSize:20; 
    } 
    mx|ColumnChart 
    { 
     fontSize:15; 
    } 

</fx:Style> 

Предоставление setStyle для Legend не работает.

Пожалуйста, дайте мне знать, если это сработает для вас.

+0

Спасибо, Рандхир. Я применил стиль к приложению. Но, увы .. никакой разницы. Нужно ли мне что-то делать и в коде? –

+0

Вы сохраняете этот код в том же файле mxml, где объявлен компонент диаграммы? Вам также нужно проверить, объявлен ли тот же самый css в любом месте вашего файла css или нет. Нет никакого изменения в коде, который вам просто нужно применить css в файле mxml, где вы добавили компонент диаграммы или в глобальный файл css. –

Смежные вопросы