剑道图表图例：左边的标签，右边的颜色

Posted 2023-05-09

技术标签:

【中文标题】剑道图表图例：左边的标签，右边的颜色【英文标题】：kendo chart legend : label at left, color at right 【发布时间】：2016-02-26 15:53:10 【问题描述】：

我的 js 代码中有剑道图表。默认情况下，图例区域布局是，有颜色列表，并且每种颜色的右侧 - 都有带有系列名称的标签。我想颠倒顺序：先放标签，再放颜色，然后向右对齐。

我认为最好的方法是通过 legend.item，但我不知道该怎么做。

查看当前状态：

这是我想要的演示：

【问题讨论】：

我看不到图片，有人知道为什么吗？在 JSFiddle 中显示你的问题正如我在我的问题中所写的那样，没有问题 - 所有工作都已修复。我只想改变能见度，看图，真的很简单…… 【参考方案1】：

您可以使用剑道图例方法创建自定义图例视觉效果。

legend: 
    item: 
      visual: function (e) 

        // get the default color for the legend shape
        var color = e.options.markers.background;

        // get the default color for the legend text
        var labelColor = e.options.labels.color;

        // bounds of the legend
        var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
        var layout = new kendo.drawing.Layout(rect, 
          spacing: 5,
          alignItems: "center"
        );

        // Recreate the legend shape (can be any shape)
        var marker = new kendo.drawing.Path(
          fill: 
            color: color
          
        ).moveTo(10, 0).lineTo(15, 10).lineTo(5, 10).close();

        // recreate the label text
        var label = new kendo.drawing.Text(e.series.name, [0, 0], 
          fill: 
            color: labelColor
          
        );

        // This is the key part: it draws the label first then the shape
        layout.append(label, marker);
        layout.reflow()

        return layout;

这段代码的重要部分是这部分：