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

Question

我的js代码上有kendo-chart。 默认情况下，图例区域布局是，有颜色列表，每种颜色的右侧 - 有标签和系列名称。我想颠倒顺序：首先放置标签，然后将颜色放在第二位，然后将其对齐。

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

查看当前状态：

以下是我想要的演示：

Answer 1

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

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;
      }
    }

此代码的重要部分是这一部分：

 layout.append(label, marker);

因为我们首先指定标签，然后是标记，标签应首先出现。

我没有为此设置jsFiddle，但是Kendo在他们的道场中有一个例子：http://dojo.telerik.com/OdiNi

Answer 2

在这种情况下，您将隐藏图例。

legend: {
    visible: false
}, 

在html中创建自己的图例。