如何使Telerik's RadHtmlChart图例以两列显示

本文关键字：显示 两列 Telerik 何使 RadHtmlChart | 更新日期: 2023-09-27 18:18:22

我正在做一个asp.net webforms项目。我正在使用Telerik的RadHtmlChart控件。我希望在两列中显示图例。目前它显示为单列。我试着让小的高度，所以它会变成两个或更多的列。但是没有成功。

RadHtmlChart2.Legend.Appearance.Height.Equals (20);

谢谢

如何使Telerik's RadHtmlChart图例以两列显示

RadHtmlChart的图例的主要目的是显示与显示数据相关的信息，没有允许填充自定义图例项的属性。

NameField属性是特定于PieSeries, DonutSeries和BubbleSeries的，但是您可以通过设置BarSeries和ColumnSeries的Name属性来实现相同的外观:

<telerik:ColumnSeries DataFieldY="yValue" Name="column series"></telerik:ColumnSeries>

为系列指定Name属性将在图例中创建一个"item"。请注意，此属性用于显式设置系列的名称，而NameField属性在数据绑定场景中是等价的。

我还附上了一个示例页面，我绑定了一个ColumnSeries并设置了它的Name属性，所以你可以检查我的建议。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Legend-Bar-Column.aspx.cs" Inherits="TICKETS_Chart_2013_Q3_Legend_Bar_Column_Legend_Bar_Column" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadHtmlChart runat="server" ID="Chart" Skin="Black">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="yValue" Name="column series"></telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </form>
</body>
</html>

CS文件

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TICKETS_Chart_2013_Q3_Legend_Bar_Column_Legend_Bar_Column : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Chart.DataSource = GetData();
        Cha

rt.DataBind ();} 

protected DataTable GetData()
{
    DataTable table = new DataTable();
    table.Columns.Add(new DataColumn("yValue"));
    table.Rows.Add(new object[] { 10 });
    table.Rows.Add(new object[] { 30 });
    table.Rows.Add(new object[] { 30 });
    return table;
}

}

如果您需要进一步的帮助，请随时与我联系。

看起来您可以按照这里的建议来控制图例的大小和列数，使用声明式样式，例如:

    <Legend>
        <Appearance Orientation="Horizontal" Width="220">
        </Appearance>
    </Legend>
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/legend-settings

相关文章：