Kendo ui 如何调整类别'；把标签变成肯多克艺术？

我一直在使用kendochart，如示例所示：

分类定义如下：

categoryAxis: {
    categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
                    majorGridLines: {
                        visible: false
                    },
                },

如果您注意到，很难看到categoryAxis下的标签

这样做是有可能的：

    // ...    
    categoryAxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
            labels: {
                step: 2
            },
            majorGridLines: {
                visible: false
            },
        }
    // ...

---

您对图像的建议不是现成的（但通过一些黑客手段是可能的）。您有两个选择-旋转标签或跳过其他标签：

每隔一个标签跳过一次

为此，您需要在配置标签时指定

步骤

值，如下所示：

    // ...    
    categoryAxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
            labels: {
                step: 2
            },
            majorGridLines: {
                visible: false
            },
        }
    // ...

旋转标签

这将防止它们重叠，因为它们将是横向的。这样，它们更容易阅读，而您不会错过其他标签。您需要将

旋转
值设置为-90：

    // ...    
    categoryAxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
            labels: {
                rotation: -90
            },
            majorGridLines: {
                visible: false
            },
        }
    // ...

。。。还有哈奇的方式

这不是官方支持的，需要对呈现的svg图像进行一些操作。我们需要先稍微改变轴的颜色，这样我们就可以通过颜色找到元素：

// ...    
        categoryAxis: {
            categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
                color: "#000001",
                majorGridLines: {
                    visible: false
                },
            }
// ...

然后我们将运行一个脚本，该脚本将查找所有标签，并将每个其他标签的“y”位置增加8个像素：

$(document).ready(createChart);

var axisLabels = $("#chart").find("text[fill='#000001']");

for(i = 0; i < axisLabels.length; i += 2){
    $(axisLabels[i]).attr("y",parseInt($(axisLabels[i]).attr("y")) + 8); 
}

$（文档）.ready（createChart）；
var axisLabels=$（“#图表”）.find（“text[fill='#000001']”）；
对于（i=0；i

这是小提琴：
谢谢。很高兴我能帮忙。