Цвет метки диаграммы кендо - PullRequest
Новая
       10

Цвет метки диаграммы кендо

0 голосов
/ 28 апреля 2018

Можно ли как-то показать часть текста надписи кендо другим цветом? Пожалуйста, найдите реализацию диаграммы здесь http://jsfiddle.net/52c3K/16/

enter image description here

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

выделенная часть метки выделена красным и жирным шрифтом.

Ваша помощь очень ценится

1 Ответ

0 голосов
/ 29 апреля 2018

Это немного сложно, так как мы не можем просто использовать шаблон, я попытался поиграть с Visual и немного поработать здесь и там. Результат не идеален, но, пожалуйста, проверьте его здесь на jsFiddle

Я попытаюсь объяснить, что я там сделал

  1. я использую tags.visual конфигурацию
  2. e.text в основном содержит вашу строку метки, но я сделал несколько циклов на dataSource для полных данных (но в этом есть недостаток, поскольку в e.text может быть дублированный текст)
  3. использовать new kendo.drawing.Group();, в частности, функцию drawDOM + шаблон кендо
  4. используйте new kendo.drawing.Layout() для добавления нарисованного DOM на правильное место, я следовал некоторым советам здесь
  5. И обратите внимание, что в вашей скрипке версия кендо - 2013, ну, я использовал 2018.1.221
...