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

Question

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

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

我没有修改库的 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;
        }
    }
},

无论如何，您应该跟踪 DevExpress 在 Charts - Provide the capability to get rid of overlapping series labels 上下文中实现开箱即用的标签重叠解析的进度。门票。