时间戳

首页 > 解决方案 > 剑道图表标签颜色

kendo-ui - 剑道图表标签颜色

问题描述

有什么办法可以用不同的颜色显示剑道标签文本的一部分？请在此处找到图表实现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 #"
                }
            });

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

非常感激你的帮助

标签： kendo-uikendo-chart

解决方案

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

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

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

推荐阅读