首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Telerik,RadHtmlChart中,不能获得与在X轴上呈现的标签相同的数据格式

在Telerik,RadHtmlChart中,不能获得与在X轴上呈现的标签相同的数据格式
EN

Stack Overflow用户
提问于 2022-03-19 19:53:32
回答 1查看 79关注 0票数 0

RadHtmlChart没有正确地绑定工具提示,但与X轴标签的工作方式相同.我试图设置工具提示与客户端模板和数据格式字符串,但仍然没有成功的显示工具提示日期格式,只是以数字显示。

请参考我下面的代码示例与图像说明的问题。

X轴1:https://i.stack.imgur.com/x5Dqk.png上日期字段悬停问题的Telerik RadHtmlChart显示值

->我的RadHtmlChart代码

TestChart.aspx

代码语言:javascript
运行
复制
<Telerik:RadHtmlChart runat="server" ID="AnnexRadHtmlChart" Width="1400px" Height="650px"></Telerik:RadHtmlChart>

TestChart.aspx.cs

代码语言:javascript
运行
复制
protected void Page_Load(object sender, EventArgs e)
    {
        BindChart();
    }

protected DataSet GetData()
{
    DataSet dataSet = new DataSet();

    List<string> ListTab = new List<string>();
    ListTab.Add("Plan");
    ListTab.Add("Actual");
    ListTab.Add("Earned Value");

    foreach (var tab in ListTab)
    {
        DataTable dt = dataSet.Tables.Add(tab);

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("AnnexAmount", typeof(int));
        dt.Columns.Add("AnnexDate", typeof(DateTime));
        dt.Columns.Add("AnnexTabName", typeof(string));

        if (tab.Trim().ToLower() == "plan")
        {
            dt.Rows.Add(1, 50000, new DateTime(2015, 06, 12), tab);
            dt.Rows.Add(1, 150000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(1, 200000, new DateTime(2018, 06, 17), tab);
            dt.Rows.Add(1, 250000, new DateTime(2020, 09, 18), tab);

        }
        else if (tab.Trim().ToLower() == "actual")
        {
            dt.Rows.Add(2, 100000, new DateTime(2015, 07, 12), tab);
            dt.Rows.Add(2, 180000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(2, 230000, new DateTime(2018, 07, 17), tab);
            dt.Rows.Add(2, 250000, new DateTime(2020, 09, 18), tab);

        }
        else
        {
            dt.Rows.Add(3, 100000, new DateTime(2015, 03, 12), tab);
            dt.Rows.Add(3, 200000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(3, 250000, new DateTime(2018, 05, 17), tab);
            dt.Rows.Add(3, 350000, new DateTime(2020, 08, 18), tab);
        }
     
    }
    return dataSet;
}

public void BindChart()
{
    #region X-AXIS ITEM

    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.Text = "Month";
    AnnexRadHtmlChart.PlotArea.XAxis.LabelsAppearance.DataFormatString = "{0:MMM/yyyy}";
    AnnexRadHtmlChart.PlotArea.XAxis.Type = Telerik.Web.UI.HtmlChart.AxisType.Date;
    AnnexRadHtmlChart.PlotArea.XAxis.BaseUnit = DateTimeBaseUnit.Days;
    AnnexRadHtmlChart.PlotArea.XAxis.MajorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.XAxis.MinorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.XAxis.MajorGridLines.Color = Color.DarkSeaGreen;
    AnnexRadHtmlChart.PlotArea.XAxis.MinorGridLines.Color = Color.Bisque;
    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.Position = AxisTitlePosition.Center;
    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.RotationAngle = 0;

    #endregion

    #region Y-AXIS ITEM

    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.Text = "Value";
    AnnexRadHtmlChart.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0:N}";
    AnnexRadHtmlChart.PlotArea.YAxis.MajorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorTickSize = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorTickSize = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.LabelsAppearance.RotationAngle = 0;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorGridLines.Color = Color.DarkSeaGreen;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorGridLines.Width = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorGridLines.Color = Color.PaleGreen;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorGridLines.Width = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.Position = AxisTitlePosition.Center;
    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.RotationAngle = 0;

    #endregion

    DataSet dataSet = GetData();

    List<Color> ListColors = new List<Color>();
    ListColors.Add(Color.IndianRed);
    ListColors.Add(Color.Teal);
    ListColors.Add(Color.Purple);
    ListColors.Add(Color.SlateGray);

    for (int i = 0; i < dataSet.Tables.Count; i++)
    {
        DataTable dt = dataSet.Tables[i];

        ScatterLineSeries scatterLineSeries = new ScatterLineSeries();
        scatterLineSeries.Name = dt.Rows[0]["AnnexTabName"].ToString() + " Data";
        scatterLineSeries.Appearance.FillStyle.BackgroundColor = ListColors[i];
        scatterLineSeries.MarkersAppearance.BackgroundColor = Color.AntiqueWhite;
        scatterLineSeries.LabelsAppearance.Visible = false;
        scatterLineSeries.TooltipsAppearance.DataFormatString = "Month/Year : {0:D} </br> Value : {1:N} </br> Tab Name : " + dt.Rows[0]["AnnexTabName"].ToString() + "";
        scatterLineSeries.TooltipsAppearance.Color = Color.LightPink;

        foreach (DataRow dr in dt.Rows)
        {
            DateTime dateTime = Convert.ToDateTime(dr.ItemArray[2].ToString());
            decimal dtValue = ConvertToJavaScriptDateTime(dateTime);
            ScatterSeriesItem scatterSeriesItem = new ScatterSeriesItem(dtValue, Convert.ToDecimal(dr.ItemArray[1].ToString()));

            scatterLineSeries.SeriesItems.Add(scatterSeriesItem);
        }

        AnnexRadHtmlChart.PlotArea.Series.Add(scatterLineSeries);
        AnnexRadHtmlChart.ChartTitle.Text = "Annex Data Chart";
        AnnexRadHtmlChart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
        AnnexRadHtmlChart.Appearance.FillStyle.BackgroundColor = Color.Beige;
    }
}

protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
{
    return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
}
EN

回答 1

Stack Overflow用户

发布于 2022-03-26 08:04:20

我认为工具提示使用JS来格式化值,而我在代码中看到了一些自定义格式。也许,如果您想确保控制来自C#的格式,可以在数据源中添加一列,您可以将字符串放入其中,然后通过其模板在工具提示中使用该列。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71541553

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档