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

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

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

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

查看当前状态：

这是我想要的演示：

【问题讨论】：

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

标签： javascript css kendo-chart

【解决方案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;
      }
    }

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

 layout.append(label, marker);

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

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

【讨论】：

【解决方案2】：

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

legend: {
    visible: false
},

并在 html 中创建您自己的图例。

【讨论】：