Come posizionare le etichette di correzione in modo che non si sovrappongano nel grafico di DevExpress js?

Question

Ho bisogno di mettere le etichette in tutti i miei grafici. Ma le etichette si sovrappongono per la densità del grafico. Allego un campione.

Ho bisogno di separarli. Come?

Non ho modificato il CSS della lib. Utilizzando l'ultima versione.

Questo è un esempio di codice, può essere incollato sulla http://js.devexpress.com/Demos/VizGallery/#chart/chartsareaseriesarea:

var labelPercent = { 
    visible: true, 
    format: 'percent', 
    precision: 1, 
}; 


var dataSource = [ 
    { 
     "Aeropuertos": 0.003, 
     "AguaFacilidades": 0.016, 
     "CallesPuentes": 0.183, 
     "ConstruccionResidencialNO": 0.542, 
     "PetroleoGas": 0.071, 
     "PlantasEnergia": 0.11, 
     "PuertosFluviales": 0.052, 
     "ViasFerreas": 0.023, 
     "Year": "2011" 
    }, 
    { 
     "Aeropuertos": 0.01, 
     "AguaFacilidades": 0.019, 
     "CallesPuentes": 0.19, 
     "ConstruccionResidencialNO": 0.542, 
     "PetroleoGas": 0.079, 
     "PlantasEnergia": 0.09, 
     "PuertosFluviales": 0.029, 
     "ViasFerreas": 0.04, 
     "Year": "2012" 
    }, 
    { 
     "Aeropuertos": 0.01, 
     "AguaFacilidades": 0.019, 
     "CallesPuentes": 0.191, 
     "ConstruccionResidencialNO": 0.541, 
     "PetroleoGas": 0.082, 
     "PlantasEnergia": 0.088, 
     "PuertosFluviales": 0.029, 
     "ViasFerreas": 0.04, 
     "Year": "2013" 
    }, 
    { 
     "Aeropuertos": 0.009, 
     "AguaFacilidades": 0.019, 
     "CallesPuentes": 0.19, 
     "ConstruccionResidencialNO": 0.539, 
     "PetroleoGas": 0.085, 
     "PlantasEnergia": 0.085, 
     "PuertosFluviales": 0.029, 
     "ViasFerreas": 0.042, 
     "Year": "2014E" 
    }, 
    { 
     "Aeropuertos": 0.009, 
     "AguaFacilidades": 0.018, 
     "CallesPuentes": 0.191, 
     "ConstruccionResidencialNO": 0.536, 
     "PetroleoGas": 0.09, 
     "PlantasEnergia": 0.084, 
     "PuertosFluviales": 0.029, 
     "ViasFerreas": 0.043, 
     "Year": "2015E" 
    }, 
    { 
     "Aeropuertos": 0.009, 
     "AguaFacilidades": 0.017, 
     "CallesPuentes": 0.192, 
     "ConstruccionResidencialNO": 0.529, 
     "PetroleoGas": 0.096, 
     "PlantasEnergia": 0.084, 
     "PuertosFluviales": 0.028, 
     "ViasFerreas": 0.044, 
     "Year": "2016E" 
    }, 
    { 
     "Aeropuertos": 0.009, 
     "AguaFacilidades": 0.017, 
     "CallesPuentes": 0.195, 
     "ConstruccionResidencialNO": 0.521, 
     "PetroleoGas": 0.102, 
     "PlantasEnergia": 0.084, 
     "PuertosFluviales": 0.028, 
     "ViasFerreas": 0.045, 
     "Year": "2017E" 
    }, 
    { 
     "Aeropuertos": 0.009, 
     "AguaFacilidades": 0.016, 
     "CallesPuentes": 0.196, 
     "ConstruccionResidencialNO": 0.514, 
     "PetroleoGas": 0.108, 
     "PlantasEnergia": 0.084, 
     "PuertosFluviales": 0.028, 
     "ViasFerreas": 0.045, 
     "Year": "2018E" 
    }, 
    { 
     "Aeropuertos": 0.009, 
     "AguaFacilidades": 0.015, 
     "CallesPuentes": 0.197, 
     "ConstruccionResidencialNO": 0.508, 
     "PetroleoGas": 0.115, 
     "PlantasEnergia": 0.083, 
     "PuertosFluviales": 0.027, 
     "ViasFerreas": 0.046, 
     "Year": "2019E" 
    }, 
    { 
     "Aeropuertos": 0.008, 
     "AguaFacilidades": 0.014, 
     "CallesPuentes": 0.198, 
     "ConstruccionResidencialNO": 0.501, 
     "PetroleoGas": 0.123, 
     "PlantasEnergia": 0.082, 
     "PuertosFluviales": 0.027, 
     "ViasFerreas": 0.047, 
     "Year": "2020E" 
    }, 
    { 
     "Aeropuertos": 0.008, 
     "AguaFacilidades": 0.014, 
     "CallesPuentes": 0.199, 
     "ConstruccionResidencialNO": 0.493, 
     "PetroleoGas": 0.132, 
     "PlantasEnergia": 0.08, 
     "PuertosFluviales": 0.027, 
     "ViasFerreas": 0.047, 
     "Year": "2021E" 
    }, 
    { 
     "Aeropuertos": 0.008, 
     "AguaFacilidades": 0.013, 
     "CallesPuentes": 0.199, 
     "ConstruccionResidencialNO": 0.485, 
     "PetroleoGas": 0.141, 
     "PlantasEnergia": 0.079, 
     "PuertosFluviales": 0.026, 
     "ViasFerreas": 0.048, 
     "Year": "2022E" 
    } 
]; 

$("#container").dxChart({ 
    dataSource: dataSource, 
    commonSeriesSettings: { 
     type: "fullStackedArea", 
     argumentField: "Year" 
    }, 
    series: [ 
     { 
      valueField: 'CallesPuentes', 
      name: 'Calles y puentes', 
      label: labelPercent, 
     }, 
     { 
      valueField: 'ViasFerreas', 
      name: 'Vías ferreas', 
      label: labelPercent, 
     }, 
     { 
      valueField: 'Aeropuertos', 
      name: 'Aeropuertos', 
      label: labelPercent, 
     }, 
     { 
      valueField: 'PuertosFluviales', 
      name: 'Puertos - Vías fluviales', 
      label: labelPercent, 
     }, 
     { 
      valueField: 'PetroleoGas', 
      name: 'Petróleo y gas', 
      label: labelPercent, 
     }, 
     { 
      valueField: 'PlantasEnergia', 
      name: 'Plantas de energía', 
      label: labelPercent, 
     }, 
     { 
      valueField: 'AguaFacilidades', 
      name: 'Agua y facilidades sanitarias', 
      label: labelPercent, 
     }, 
     { 
      valueField: 'ConstruccionResidencialNO', 
      name: 'Construcción Residencial y No Residencial', 
      label: labelPercent, 
     } 
    ], 
    title: "Test", 
    argumentAxis:{ 
     valueMarginsEnabled: false 
    }, 
     tooltip: { 
      enabled: true, 
     }, 
    valueAxis:[{ 
     grid: { 
      visible: true 
     } 
    }, 
    { 
     min: 0, 
     name: 'valueAxis', 
     position: 'right', 
     grid: { 
      visible: true 
     }, 
    }, 
    { 
     min: 0, 
     name: 'valueAxis2', 
     position: 'right', 
     grid: { 
      visible: true 
     }, 
    }], 
    legend: { 
     verticalAlignment: "bottom", 
     horizontalAlignment: "center" 
    } 
}); 

Answer 1

Giocando con jQuery e il grafico SVG, si potrebbe fare qualcosa di simile:

// Reduce the rectangle background of each label 
$(".dxc-labels-group rect").attr("x", "-16"); 
$(".dxc-labels-group rect").attr("y", "-12"); 
$(".dxc-labels-group rect").attr("width", "32"); 
$(".dxc-labels-group rect").attr("height", "15"); 

// Reduce the font-size of each label: 
$(".dxc-labels-group rect + text").css("font-size", "11px"); 


// Separate the labels by moving up/down some of them 
$.each($(".dxc-labels-group .dxc-labels > g > g[transform]"), function(i, elm) { 

    // 1) Save the original Y coord of the label 
    var translateY = $(elm).attr("transform").match(/translate\(\d{1,4},(\d{1,4})\)/); 

    if(translateY && translateY[1]) { 

     // 2) Move up/down the label according to its color 
     switch($(elm).children("rect").attr("fill")) { 

      // 3/ For example, move up the blue ones 
      case "#91bdc7": 
       var move = 30; // Move up 
       var transform = $(elm).attr("transform").replace(/(translate\(\d{1,4},)(\d{1,4})(\))/, "$1"+(translateY[1]-move)+"$3"); 
       $(elm).attr("transform", transform); 
       break; 

      // Do similar things for other colors... 
     } 
    } 
}); 

Per eseguire questo codice, copiare/incollare nella console (con Chrome funziona come un fascino).

Answer 2

Temo che non è possibile mostrare tutte le etichette contemporaneamente nel tuo caso a causa di alta densità di etichette.

L'utilizzo della funzione di callback customizeText può essere una soluzione per diminuire la densità delle etichette nascondendo alcune etichette. L'idea principale è di restituire una stringa vuota quando un valore non soddisfa i tuoi requisiti (ad esempio: meno del 5%).

commonSeriesSettings: { 
    type: "fullStackedArea", 
    argumentField: "Year", 
    label: { 
     visible: true, 
     format: 'percent', 
     precision: 1, 
     customizeText: function(arg) { 
      if (arg.value < 0.05) 
       return ""; 
      return arg.valueText; 
     } 
    } 
}, 

In ogni caso, si dovrebbe monitorare i progressi nell'attuazione DevExpress di out-of-the-box label-sovrapposizione risolvere nel contesto del biglietto Charts - Provide the capability to get rid of overlapping series labels.