Как исправить размещение меток, чтобы они не перекрывались в диаграмме DevExpress js?
Мне нужно поставить ярлыки на все мои графики. Но метки перекрываются по плотности графика. Я прилагаю образец.
Мне нужно разделить их. Как?
Я не изменил CSS библиотеки. Используя последнюю версию.
Это пример кода, который можно вставить на http://js.devexpress.com/Demos/VizGallery/:
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"
}
});
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 он работает как шарм).
Боюсь, что в вашем случае невозможно показать все ярлыки одновременно из-за высокой плотности ярлыков.
Использование функции обратного вызова 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 во внедрении встроенного разрешения наложения меток в контексте диаграмм. Предоставьте возможность избавиться от наложения меток серийных меток.