如何修复标签的位置，使它们不会在DevExpress js图表中重叠

How fix labels placement so them not overlap in DevExpress js chart?

本文关键字：DevExpress js 重叠标签何修复位置更新时间：2023-09-26

我需要为所有图表添加标签。但由于图表的密度，标签重叠。我附上一个样品。

我需要把它们分开。怎样

我没有修改库的CSS。使用最新版本。

这是一个示例代码，可以粘贴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"
    }
});

由于标签密度高，恐怕在您的情况下不可能同时显示所有标签。

使用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;
        }
    }
},

无论如何，您应该跟踪DevExpress在图表上下文中实现开箱即用标签重叠解决的进展——提供消除重叠系列标签票证的能力。

通过使用jQuery和SVG图表，您可以执行以下操作：

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

要运行此代码，请将其复制/粘贴到控制台中（使用Chrome时，它就像一个魅力）。