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

Question

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

我需要将它们分开。怎么样？

我没有修改 lib 的 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"
    }
});

Answer 1

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

使用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 在实现开箱即用的标签重叠解析方面的进展。

Answer 2

通过使用 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 时，它​​就像一个魅力）。