Question

我正试图在条形图上的x轴上显示类别标签，但无法知道如何执行此操作。这是HTML和JS：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="chart"></div>
    <script src="js/thirdParty/jquery.js"></script>
    <script src="js/thirdParty/kendo.all.min.js"></script>
    <script>
        $(function () {
            $("#chart").kendoChart({
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "Category A",
                    data: [5]
                }, {
                    name: "Category B",
                    data: [20]
                }, {
                    name: "Category C",
                    data: [10]
                }],
            })
        });
    </script>
</body>
</html>

下面的屏幕截图在一个红框中突出显示我试图放置标签：

enter image description here

任何帮助都将不胜感激。

Answer 1

在您的情况下，您提供了3个系列。如果你打算用三个不同的X绘图点创建单个系列，那么正确的方法如下：

$("#chart2").kendoChart({
                legend: {
                    visible: true
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    data: [5,10,20]
                }],
              categoryAxis: [{
        categories: ["Category A", "Category B","Category C"]
      }]

            });

我所做的是 - 我已经说过Xaxis将有3个绘图点，而且该系列包含一个包含3 y绘图点的数组数据。

这是JSBin - http://jsbin.com/aroquki/1/edit

希望这有帮助。

Answer 2

你知道，这个例子可以解决你的问题。

JSbin Code

Document kendo Chart

剑道UI条形图上的类别标签

2 个答案: