Javascript 如何在DevExpress js图表中固定标签位置，使其不重叠？

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

我需要把它们分开。怎么做

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

这是一个示例代码，可以粘贴到：

---

由于标签密度高，恐怕您不可能同时显示所有标签

使用回调函数可以通过隐藏一些标签来降低标签密度。其主要思想是在值不满足您的要求时返回一个空字符串（例如：小于5%）

常识设置：{
类型：“fullStackedArea”，
参数字段：“年”，
标签：{
可见：对，
格式：“百分比”，
精度：1，
customizeText:函数（参数）{
如果（参数值<0.05）
返回“”；
返回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，它就像一个符咒一样工作）。

我尝试了此操作，但在图表上看不到任何更改。.dxc标签组的大小保持不变。是否已在Chrome（F12）的控制台中添加此代码并按Enter键？如果你将其复制/粘贴到图表代码的区域，它将不起作用。我更改为在每个过程中交替var移动（移动*-1），它会起作用，因此我会奖励价格。好主意，这是一种可能性。谢谢你的赏金！

commonSeriesSettings: {
    type: "fullStackedArea",
    argumentField: "Year",
    label: {
        visible: true,
        format: 'percent',
        precision: 1,
        customizeText: function(arg) {
            if (arg.value < 0.05)
              return "";
            return arg.valueText;
        }
    }
},

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