剑道图表标签颜色

Question

有什么方法可以用不同的颜色显示剑道标签文本的一部分？ 请在这里找到图表实现http://jsfiddle.net/52c3K/16/

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

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

非常感谢您的帮助

Answer 1

这有点难，因为我们不能只使用模板，我尝试使用视觉效果并在这里和那里进行了一些调整。结果并不完美，但请在jsFiddle查看这里

我会尝试解释我在那里做了什么

1. 我使用 labels.visual 配置
2. e.text 基本上包含您的标签字符串，但我在 dataSource 上进行了一些循环以获取完整数据（但这方面存在弱点，因为 e.text 上可能存在重复的文本）
3. 使用new kendo.drawing.Group(); 特别是drawDOM 函数+剑道模板
4. 利用new kendo.drawing.Layout() 将绘制的DOM 附加到正确的位置，我遵循了一些提示here
5. 请注意您的小提琴中剑道版本是 2013，我使用的是 2018.1.221