如何将类别的标签调整为 KendoChart？

Question

我一直在使用 kendochart 作为示例：http://jsfiddle.net/ericklanford/6dr0k59v/2/

类别轴定义为：

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下的标签。

有可能做这样的事情：

Answer 1

您所提议的图像不是开箱即用的（但可以通过一些黑客手段实现）。正式你有两个选择 - 旋转标签或跳过所有其他标签：

跳过所有其他标签

为此，您需要在配置标签时指定一个 step 值，如下所示：

    // ...    
    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
            },
        }
    // ...

旋转标签

这将防止它们重叠，因为它们会在侧面。这样它们就更容易阅读，同时您也不会错过所有其他标签。您需要将 rotation 值设置为 -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
            },
        }
    // ...

...和 hacky 方式

这不受官方支持，需要对渲染的 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); 
}

这里是 fiddle：http://jsfiddle.net/4Lsownbp/

如何将类别的标签调整为 KendoChart？

How to adjust the categories's labels into a KendoChart?

kendo-ui

kendo-chart