使用 Angular 修改 Kendo UI 图表标记

Question

我需要使用 Angular 动态更改 Kendo UI 折线图标记的样式（背景和大小）。 我知道这可以通过这样的功能实现：

markers: {
      background:function(e) {
        return 'blue';
      }

当我在控制器上使用它时，或者在 html 文件之外的任何其他地方使用它时，这非常有用

$("#chart").kendoChart(...);

我正在使用 Angular，因此系列选项位于我的带有 k-serias 指令的 html 标记中。 当我尝试在那里添加一个函数时，我得到一个错误。

Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 237-237 [#] in expression [[

这是我输入的指令：

k-series="[{
                type: 'line',
                field: 'score',
                markers: {
                    type: 'square',
                    background: function(e) { return #ffffff; }
                }
          }]"

我要做的就是在 k-serias 指令中为背景和大小属性设置一个函数。

谢谢！

Answer 1

您可以将指令k-series 绑定到您的角度$scope.series。

在 HTML 文件中： k-series="series"

在JS文件中

$scope.series = [{
   type: 'line',
   field: 'score',
   markers: {
       type: 'square',
       background: function(e) { return "#ffffff"; }
   }
}];