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

Question

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

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

照片如下：

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

Answer 1

我认为您需要尝试一下 legend width and the 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;
      }
    }
  },

在演示中，我正在检查系列名称并将组标签添加到第一和第三系列。图例宽度设置为换行到第二行。 注意：需要反复试验才能使您的数据正常工作...

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

Kendo line chart - series name with labels in two rows

charts

linechart

telerik

kendo-ui

kendo-chart

DEMO