【问题标题】：Kendo want to add specific label for each graph point剑道想为每个图形点添加特定的标签
【发布时间】：2017-06-18 12:27:55
【问题描述】：

我正在使用剑道图表，并希望为图表上的每个点添加特定标签，与该点的数据值无关，而是与该点的定性属性相关的符号。

在此代码中，我可以按系列自定义标签，其中默认为向上箭头，印度为 *，俄罗斯联邦为空格。但它不允许我在每个系列中逐点改变标签。有什么办法吗？有什么方法可以为每个系列设置一组标签值，或者类似的东西？

谢谢！

--布鲁斯

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/column">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Gross domestic product growth /GDP annual %/"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column",
                    labels: {template: "↑",
                             visible: true, color: 'red',
                                   position: "outsideEnd"}
                },
                series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
                    labels: {template: "*"}
                }, {
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3],
                    labels: {template: " "}
                }, {
                    name: "Germany",
                    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    line: {
                        visible: false
                    },
                    labels: {
                        padding: {top: 135}
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

【问题讨论】：

确定每个点的标签的规则应该是什么？点的索引决定了它的标签还是其他什么？
我有一个公式，它将根据数据点随时间的变化情况和/或计算该数据点的原始数据项的数量为每个数据点生成不同的值。例如，如果所有数据点都是调查中数字的平均值，我希望标签反映是否至少有 5 个调查响应用于计算平均值。底线，假设我将生成一个标签数组，类似于系列数据值数组。

标签： kendo-ui kendo-chart

【解决方案1】：

我已使用您的代码构建解决方案。您可能不会完全按原样使用它，但您会得到大致的想法。见this Plunker。

基本上我所做的如下：

1) 将series的item转换为具有两个字段的对象，一个是实际数据，一个是标签标识符。

data: [{value: 1, label: 0}, {value: 2, label: 1}, {value: 3, label: 2}],

2) 创建一个函数，将模板对象 (e) 转换为正确的标签字符串。

let labels = {
    "India": ["label1", "label2", "label3"],
    "Russian Federation": [2, 4, 6]
};

let getLabel = function(e) {
    return labels[e.series.name][e.dataItem.label];
};

3) 将函数放在系列的模板字段中。

seriesDefaults: {
    labels: {
        template: getLabel
    }
}

【讨论】：

谢谢@shai 这看起来正是我想要的。问题：剑道如何知道从数组元素对象中的“value”键中取出值来绘制图形，而不是直接使用数组元素作为值？
这是series.field 设置的默认值。你可以阅读它here。
请注意，我将template 设置更改为seariesDefaults。这将使它更容易，因为您只需要为所有系列编写一次。
如果解决了你的问题，请采纳：）
太棒了，接受了。我最终不得不更改 GetLabel 函数以在其他地方获取数据，以适应我们现有的数据模型，但整体方法非常有效。

【解决方案2】：

您可以使用标签的 visual property 根据值设置文本：

seriesDefaults: {
    type: "column",
    labels: {
             visible: true, color: 'red',
             position: "outsideEnd",
             visual: function(e) {
                var center = e.rect.center();
                var val = parseFloat(e.text);
                var text = "↑";
                if (val > 4) text = "*";
                if (val > 7) text = " ";
                return new kendo.drawing.Text(text, [center.x, e.rect.origin.y], {
                    fill: {
                      color: "red"
                    }
                });
                }

            }
},

DEMO

【讨论】：

谢谢@ezanker 我曾想过这样的事情，但这意味着标签只是值的函数，而不是类别和系列维度的函数。在许多情况下，您写的内容将是完美的，但在我的情况下，我可能需要在不同图形坐标处为相同数据值使用不同的标签。谢谢！