Kendo 想为每个图形点添加特定标签

Question

我正在使用 Kendo 图表，想为图表上的每个点添加一个特定的标签，与该点的数据值无关，而是与定性相关的符号属性那一点。

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

谢谢！

--布鲁斯

<!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>

Answer 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
    }
}

Answer 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"
                    }
                });
                }

            }
},

Kendo 想为每个图形点添加特定标签

Kendo want to add specific label for each graph point

kendo-ui

kendo-chart

DEMO