我需要在所有图表上添加标签。但标签与图表的密度重叠。我附上了一个样本。
我需要将它们分开。怎么样？
我没有修改过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"
}
});
答案 0 :(得分：2)
由于标签密度高，我担心在您的情况下无法同时显示所有标签。
使用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票证上下文中实现开箱即用标签重叠解析的进度。
答案 1 :(得分：1)
通过使用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就像魅力一样）。