的 DEMO

Question

我正试图找到一种方法来彻底改变剑道UI条形图栏的颜色。我知道有一个series.highlight.color配置选项，但这似乎只添加了该颜色的色调。我想用不同的悬停颜色完全取代普通的条形颜色。我一直在浏览文档，但似乎无法找到一个配置选项来执行此操作，即使看起来必须有一种方法通过Kendo配置选项执行此操作，而不必诉诸于黑客攻击。

非常感谢任何帮助！

Answer 1

您可以使用 series.highlight.visual 属性绘制纯色条：

$("#chart").kendoChart({
  series: [{
      type: "bar",
      data: [1, 2],
      highlight: {
        visual: function(e) {          
          var origin = e.rect.origin;
          var bottomRight = e.rect.bottomRight();
          var topRight = e.rect.topRight();
          var topLeft = e.rect.topLeft();

          var c = "green";
          var bc = "#555";

          var path = new kendo.drawing.Path({
            fill: {color:  c,opacity: 1,},
            stroke: {color: bc,opacity:  0.7,width: 2,}
          })
          .moveTo(origin.x, bottomRight.y)
          .lineTo(bottomRight.x, bottomRight.y)
          .lineTo(topRight.x, topRight.y)
          .lineTo(topLeft.x, topLeft.y)
          .close();

          return path;    
        }
      }
  }]
});

的 DEMO

在视觉功能中，您可以获取该项目并将颜色基于值或其他字段等

在Kendo UI条形图栏上悬停颜色

1 个答案:

的 DEMO