模板中的Kendo UI条件

时间:2018-06-08 14:31:28

标签: javascript jquery charts kendo-ui

在模板中我希望30为粗体和蓝色。其余的模板文字不是蓝色或粗体。

          labels: {
                    visible: true,
                    margin: {
                        left: 55
                    },
                    color: "#1246BB",
                    format: "{0}",
                    template: "#= value # \n <b>30</b>"
                },

编辑:这是一个吸引人http://dojo.telerik.com/IzAcURaD/16

1 个答案:

答案 0 :(得分:1)

如果您的代码中有条件,请使用if声明:

template: "# if (value == 30) { #<strong>#= value #</strong># } else { ##=value## } #"

以上模板在<strong>30</strong>的情况下打印value == 30,否则只打印值。

有用的参考资料:

<强>更新

图表标签的模板不是常用模板。它的输出呈现在<text>标记中,该标记无法处理html标记。所以我找到了一个名为series.label.visual的属性,您可以在其中正确格式化输出:

labels: {
    font:"10px tahoma;", // I removed the 'bold' style from the default font
    visual: function(e) {
      // createVisual() method returns the default style to be used as a base style
      var visual = e.createVisual();

      // Some checkings
      if (e.text && Number(e.text) == 70 && visual.children) {
        // The 'visual' object returned from createVisual() has an array of child items. 
        // Below we are iterating through it to change the desired values
        visual.children.forEach(child => {
          if (child.options) {
            // Now we add the bold style to the font
            child.options.font = "bold 10px tahoma;";
          }
        });
      }

      // Return the updated visual styles
      return visual;
    }
},

Demo