Kendo折线图 - 带有两行标签的系列名称

Question

我想知道是否可以将折线图系列名称分成两行，另外还有一个标签（照片中的Group1和Group2）。在下面的图片中，您可以看到我想要创建的内容。

如果没有，是否至少可以将系列名称分成两行（没有标签）？

这是照片：

这是一个来自kendo ui主页的示例，在这里您可以找到源代码：link

Answer 1

我认为您需要使用 legend width 和 legend item visual ：

的 DEMO

  legend: {
    position: "bottom",
    width: 360,
    item: {
      visual: function (e) {
        console.log(e);
        var group = "";
        var rect = new kendo.geometry.Rect([0, 0], [140, 50]);
        if (e.series.name == "1. GOOG (close)"){
          group = "Group 1: ";
          rect = new kendo.geometry.Rect([0, 0], [200, 50]);
        } else if (e.series.name == "3. AMZN (close)"){
          group = "Group 2: ";
          rect = new kendo.geometry.Rect([0, 0], [200, 50]);
        }
        var color = e.options.markers.background;
        var labelColor = e.options.labels.color;

        var layout = new kendo.drawing.Layout(rect, {
          spacing: 5,
          alignItems: "center"
        });

         var grplabel = new kendo.drawing.Text(group, [0, 0], {
          fill: {
            color: "#000"
          }
        });

        var marker = new kendo.drawing.Path({
          fill: {
            color: color
          },
          stroke : {
            color: color
          }
        }).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();

        var label = new kendo.drawing.Text(e.series.name, [0, 0], {
          fill: {
            color: labelColor
          }
        });

        layout.append(grplabel, marker, label);
        layout.reflow()

        return layout;
      }
    }
  },          

在演示中，我正在检查系列名称并将组标签添加到第一和第三系列。设置图例宽度，使其包裹到第二行。 注意：有一些试验和错误可以使您的数据合用...