kendo图表图例：标签在左边，颜色在右边 [英] kendo chart legend : label at left, color at right

问题描述

我有kendo-chart在我的js代码。
默认情况下，图例区域布局是有颜色列表，每种颜色的右边 - 有系列名称的标签。

我认为最好的方法是通过图例

查看当前状态：

这里是我想要的演示：

解决方案

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

  legend：{
 item：{
 visual：function（e）{
 
 //获取图例形状的默认颜色
 var color = e.options.markers.background; 
 
 //获取图例文本的默认颜色
 var labelColor = e.options.labels.color; 
 
 //图例的边界
 var rect = new kendo.geometry.Rect（[0，0]，[100，50]）; 
 var layout = new kendo.drawing.Layout（rect，{
 spacing：5，
 alignItems：center
}）; 
 
 //重新创建图例形状（可以是任何形状）
 var marker = new kendo.drawing.Path（{
 fill：{
 color：color 
} 
}）。moveTo（10，0）.lineTo（15，10）.lineTo（5，10）.close（） 
 
 //重新创建标签文本
 var label = new kendo.drawing.Text（e.series.name，[0，0]，{
 fill：{
 color：labelColor 
} 
}） 
 
 //这是关键部分：它首先绘制标签，然后绘制形状
 layout.append（label，marker）; 
 layout.reflow（）
 
返回布局; 
} 
} 
  

这段代码的重要部分是这部分： / p>

  layout.append（label，marker）; 
  

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

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

I have kendo-chart at my js code. By default, the legend area layout is that, there is list of colors, and the right of every color - there is label with series name. I want to reverse the order: put label first, and color second, and align it to right.

I think the best way to do it is by legend.item, but I don't know how to do it.

see the current state:

and here is demo of what I want will be:

解决方案

You can create a custom legend visual using the Kendo legend methods.

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

The important part of this code is this part:

 layout.append(label, marker);

Because we're specifying the label first, then the marker, the label should appear first.

I don't have a jsFiddle setup for this, but Kendo has an example in their dojo: http://dojo.telerik.com/OdiNi

这篇关于kendo图表图例：标签在左边，颜色在右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！