代码之家 › 专栏 › 技术社区 › S. Desclaux

Telerik Kendo StockChart列类型不显示0值的任何内容

markers telerik kendo-ui charts c#

S. Desclaux · 技术社区 · 10 年前

我有一张图表,你可以看到 on this link 带有标记

但是,当序列类型是列而不是行时,就像我的链接一样,标记不会显示。即。:

$("#chart").kendoChart({
                dataSource: foreCast,
                seriesDefaults: {
                    type: "column",
                    style: "smooth"
                },
                series: [{
                    field: "temperature",
                    categoryField: "day",
                    markers: {
                        size: 12,
                        visible: true
                    }
                }],
                valueAxis: {
                    labels: {
                        template: "#:value#â"
                    }
                },
            });

在telerik的文档中,似乎可以:

系列标记对象标记选项。 **适用于区域和线路系列**

但问题是,当我的值等于零时,用户无法判断是否有值,这对他们来说是个问题。

当值为0时,是否存在用于绘制某些内容(如标记)的解决方法?

1 回复 | 直到 10 年前

ezanker 10 年前

扩展@David Shorthouse的回答/评论

您可以使用 visual property 正如他所建议的那样。在该函数中,您可以测试值为0,然后绘制一个标记(在我的示例中是小半圆);对于非零值,根据传入的颜色和尺寸绘制规则条。

已更新 JSBIN

visual: function (e) {   
    //get chart calculated coordinates of the bar and color                                         
    var xLeft = e.rect.topLeft().x;
    var xRight = e.rect.topRight().x
    var yTop = e.rect.origin.y;
    var yBottom = e.rect.bottomRight().y;
    var c = e.options.color;

    if (e.value == 0){
      //draw small (semi-)circle for zero values
      var center = e.rect.center();  
      var circleGeometry = new kendo.geometry.Circle([center.x, center.y], 5);
      var circle = new kendo.drawing.Circle(circleGeometry).stroke(c,2);
      return circle;
    } else {
      //Draw a regular bar
      var path = new kendo.drawing.Path({
          fill: {color:  c},
          stroke: {color: c,opacity: 0.7,width: 2,}
      })
      .moveTo(xLeft,  yBottom)
      .lineTo(xRight, yBottom)
      .lineTo(xRight, yTop)
      .lineTo(xLeft,  yTop)
      .close();

      return path; 
  }                          
}

推荐文章