DEMO

Question

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

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

谢谢！

- 布鲁斯

<!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）转换系列＆＃39;项目包含两个字段的对象，一个是实际数据，另一个是标签标识符。

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

You could use the visual property of the labels to set the text based on value:

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希望为每个图形点添加特定标签

2 个答案:

DEMO