Question

我在下面的地方使用 fromRect 在图表中绘制事件行。

var draw = kendo.drawing;
      var geom = kendo.geometry;

      var gradient = new draw.LinearGradient({
        start: [ 0, 0 ], // Bottom left
        end: [ 0, 1 ],   // Top left
        stops: [{
          offset: 0,
          color: "#5789c4",
          opacity: 0.5
        }, {
          offset: 1,
          color: "#5789c4",
          opacity: 0.5
        }]
      });

$("#chart").kendoChart({
        series: [{
          type: "scatterLine",
          data: [[1, 1], [-100, -100]]
        }],
        xAxis: {
          name: "xAxis"
        },
        yAxis: {
          name: "yAxis"
        },
        render: function(e) {
            var chart = e.sender;
            var xAxis = chart.getAxis("xAxis");
            var yAxis = chart.getAxis("yAxis");
            var xSlot = xAxis.slot(-80, null);
          var xSlot1 = xAxis.slot(-100, null);
            var ySlot = yAxis.slot(null, null);

            var rect = new geom.Rect([
              // Origin X, Y
              xSlot.origin.x, null
            ], [
              // Width, height
              10,601//xSlot.width(), ySlot.height()
            ]);

          var rect1 = new geom.Rect([
              // Origin X, Y
              xSlot1.origin.x, null
            ], [
              // Width, height
              10,601//xSlot.width(), ySlot.height()
            ]);

            var path = draw.Path.fromRect(rect, {
              stroke: { color: "#5789c4", width: 2 },
              fill: gradient
            });

          var path1 = draw.Path.fromRect(rect1, {
              stroke: { color: "#5789c4", width: 2 },
              fill: gradient
            });

            chart.surface.draw(path);
          chart.surface.draw(path1);
        }
      });

但我想在每行的顶部用矩形中的一些文字命名它们的事件行。这是我无法实现的。即使有一个选项可以在悬停时显示该特定事件行的某些文本，这对我有用。如果有办法实现其中的至少一个，请告诉我。

Answer 1

只需使用kendo.drawing.Text。例如，在chart.surface.draw(path1);

之后添加此代码块

 var pos = new geom.Point(xSlot1.origin.x, 0);
 var text = new draw.Text("MyText", pos);
 chart.surface.draw(text);

在第一个矩形的顶部添加文字。

Telerik ScatterLine图表中的注释

1 个答案: