文章/答案/技术大牛

发布

社区首页 >问答首页 >Kendo想要为每个图点添加特定的标签。

问Kendo想要为每个图点添加特定的标签。
EN

Stack Overflow用户

提问于 2017-06-18 12:27:55

回答 2查看 1.8K关注 0票数 0

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

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

谢谢!

-布鲁斯

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

kendo-ui

kendo-chart

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-19 09:51:44

我用你的代码构建了一个解决方案。你可能不会完全按原样使用它，但你会有一个大致的想法。见这个柱塞。

基本上，我所做的是：

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

票数 1

Stack Overflow用户

发布于 2017-06-19 13:55:28

您可以使用标签的视觉属性来根据值设置文本：

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

            }
},

演示

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44614965

复制

相似问题

问Kendo想要为每个图点添加特定的标签。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Kendo想要为每个图点添加特定的标签。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Kendo想要为每个图点添加特定的标签。
EN