在 Telerik、RadHtmlChart 中，未在 tooptip 中获取日期格式，与渲染的 X 轴标签上的日期格式相同

Question

RadHtmlChart 未正确绑定工具提示，但其工作方式与 X 轴标签相同。 我也尝试使用客户端模板和数据格式字符串设置工具提示，但仅以数字显示的显示工具提示日期格式仍然没有成功。

请参考我的下面的代码示例，其中包含有问题的图像。

[Telerik RadHtmlChart 在 X 轴日期字段的悬停问题上显示值][1] [1]：https://i.sstatic.net/x5Dqk.png

-->我的RadHtmlChart代码

TestChart.aspx

<Telerik:RadHtmlChart runat="server" ID="AnnexRadHtmlChart" Width="1400px" Height="650px"></Telerik:RadHtmlChart>

TestChart.aspx.cs

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

Answer 1

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