Kendo ui 剑道想要为每个图形点添加特定的标签_Kendo Ui_Kendo Chart

Kendo ui 剑道想要为每个图形点添加特定的标签

kendo-ui

Kendo ui 剑道想要为每个图形点添加特定的标签,kendo-ui,kendo-chart,Kendo Ui,Kendo Chart,我正在使用剑道图，希望为图上的每个点添加一个特定的标签，与该点的数据值无关，而是与该点的定性属性相关的符号在这段代码中，我可以根据每个系列定制标签，默认为向上箭头，印度为*，俄罗斯联邦为空格。但它不允许我在每个系列中根据每个点改变标签。有办法吗？有没有办法为每个系列设置一个标签值数组，或者类似的东西谢谢 -布鲁斯 <!DOCTYPE html> <html> <head> <base href="http://demos.telerik.co

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

在这段代码中，我可以根据每个系列定制标签，默认为向上箭头，印度为*，俄罗斯联邦为空格。但它不允许我在每个系列中根据每个点改变标签。有办法吗？有没有办法为每个系列设置一个标签值数组，或者类似的东西

谢谢

-布鲁斯

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

我已经使用您的代码构建了一个解决方案。你可能不会完全按照原样使用它，但你会明白它的大意。看

基本上我所做的是：

1将序列项转换为具有两个字段的对象，一个是实际数据，另一个是标签标识符

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

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

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

            }
},

确定每个点的标签的规则应该是什么？该点的索引决定其标签或其他内容？我有一个公式，根据该数据点随时间的变化和/或计算该数据点的原始数据项的数量，为每个数据点生成不同的值。例如，如果所有数据点都是调查中数字的平均值，我希望标签反映计算平均值时是否至少使用了5个调查响应。总之，假设我将生成一个标签数组，类似于序列数据值数组。谢谢@shai，这看起来正是我想要的。问题：Kendo如何知道从array element对象的值键中提取要绘制的值，而不是直接使用array元素作为值？这是series.field设置的默认值。请注意，我将模板设置更改为seariesDefaults。这将使它更容易，因为你只需要为所有系列写一次。如果它解决了你的问题，请接受答案：太棒了，接受。最后，我不得不更改GetLabel函数，以便在其他地方获取数据，以适应我们现有的数据模型，但总体方法非常有效。感谢@ezanker，我曾经想到过类似的方法，但这意味着标签只是值的函数，而不是类别和系列维度的函数。在许多情况下，您编写的内容都是完美的，但在我的情况下，对于不同图形坐标下的相同数据值，可能需要不同的标签。谢谢