DevExpress js 차트에서 레이블 배치가 겹치지 않도록 수정하는 방법은 무엇입니까?

Question

모든 차트에 라벨을 넣어야합니다. 그러나 차트의 밀도에 따라 레이블이 겹칩니다. 샘플 첨부.

분리해야합니다. 방법?

lib의 CSS를 수정하지 않았습니다. 마지막 버전 사용.

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

, 당신은 이런 식으로 뭔가를 할 수 :

// 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... 
     } 
    } 
}); 

은/복사,이 코드를 실행 (크롬과 그것이 매력처럼 작동) 콘솔에 붙여 넣습니다.

Answer 2

나는 귀하의 경우 동시에 모든 레이블을 표시 할 수 없습니다 두려워 인해 높은 라벨 밀도 :

이

는이 http://js.devexpress.com/Demos/VizGallery/#chart/chartsareaseriesarea에 붙여 넣을 수있는 샘플 코드입니다.

customizeText 콜백 함수를 사용하면 일부 레이블을 숨겨서 레이블 밀도를 줄이는 솔루션이 될 수 있습니다. 기본 아이디어는 값이 요구 사항을 충족시키지 못하면 빈 문자열을 반환하는 것입니다 (예 : 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; 
     } 
    } 
}, 

어쨌든, 당신은 아웃 - 오브 - 박스가 Charts - Provide the capability to get rid of overlapping series labels 티켓의 맥락에서 해결 라벨 중첩의 구현에서 DevExpress의 진행 상황을 추적한다. jQuery를하고, SVG 차트와 함께 연주함으로써