剑道图表标签颜色

Posted 2021-04-05

有什么方法可以用不同的颜色显示一部分剑道标签文字吗？请在这里找到图表实施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 #"
                }
            });

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

非常感激您的帮忙

答案

这有点难，因为我们不能只使用模板，我尝试使用视觉，并在这里和那里做了一些调整。结果并不完美，但请在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