Kendo ui 剑道图表标签颜色

有什么方法可以用不同的颜色显示剑道标签文本的一部分吗？ 请在这里找到图表实现

标签的突出显示部分以红色和粗体显示

---

非常感谢您的帮助

这有点难，因为我们不能只使用模板，我尝试使用visual并在这里和那里做了一些调整。结果并不完美，但请在此处检查

我会尽力解释我在那里做了什么

我使用标签。视觉配置

e、 文本基本上包含标签字符串，但我在dataSource上对完整数据做了一些循环（但这有一个弱点，因为e.text上可能有重复的文本）

利用

新的kendo.drawing.Group（）特别是
drawDOM
函数+剑道模板

使用

new kendo.drawing.Layout（）

在正确的位置附加已绘制的DOM，我遵循以下一些技巧

请注意，剑道版本是2013年，我用的是2018.1.221

---

这是有点难，因为我们不能只使用模板，我试图发挥视觉和做了一些调整这里和那里。结果并不完美，但请在此处检查

我会尽力解释我在那里做了什么

我使用标签。视觉配置

e、 文本基本上包含标签字符串，但我在dataSource上对完整数据做了一些循环（但这有一个弱点，因为e.text上可能有重复的文本）

利用

新的kendo.drawing.Group（）特别是
drawDOM
函数+剑道模板

使用

new kendo.drawing.Layout（）

在正确的位置附加已绘制的DOM，我遵循以下一些技巧

请注意，剑道版本是2013年，我用的是2018.1.221

---

伟大的Aswer+1！我想你也可以用2个剑道绘画文本元素做同样的事情：（我还通过让模板创建一个JSON对象来获得dataItem）这两个解决方案都很棒。非常感谢两位抽出时间。还有一件事。如何在图表和标签之间添加空间。因为现在标签与条形图重叠。@bijum，您可以将布局对象向右移动：Great Aswer+1！我想你也可以用2个剑道绘画文本元素做同样的事情：（我还通过让模板创建一个JSON对象来获得dataItem）这两个解决方案都很棒。非常感谢两位抽出时间。还有一件事。如何在图表和标签之间添加空间。因为现在标签与条形图重叠。@bijum，您可以将布局对象向右移动：

$("#chart").kendoChart({
                legend: {
                    visible: false
                },
                dataSource: {
                    data: data
                } ,
                seriesDefaults: {
                    type: "bar",
                    stack: true
                },
                series: [{
                    name: "AA",
                    field: "AA",
                    color: "#32CD32",
                }, {
                    name: "BB",
                    field: "BB",
                    color: "#0000FF",
                    labels:{
                        visible: true,
                      template: "#: dataItem.AA # (#: dataItem.BB #)"
                    }
                }],
                valueAxis: {
                    max: 180,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto",
                        visible: true
                    }
                },
                categoryAxis: {
                    field: "Category",
                    majorGridLines: {
                        visible: false
                    }
                },
                chartArea: {
                    width: 500,
                    height: 255
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });