RadHtmlChart没有正确地绑定工具提示,但与X轴标签的工作方式相同.我试图设置工具提示与客户端模板和数据格式字符串,但仍然没有成功的显示工具提示日期格式,只是以数字显示。
请参考我下面的代码示例与图像说明的问题。
X轴1:https://i.stack.imgur.com/x5Dqk.png上日期字段悬停问题的Telerik RadHtmlChart显示值
->我的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;
}发布于 2022-03-26 08:04:20
我认为工具提示使用JS来格式化值,而我在代码中看到了一些自定义格式。也许,如果您想确保控制来自C#的格式,可以在数据源中添加一列,您可以将字符串放入其中,然后通过其模板在工具提示中使用该列。
https://stackoverflow.com/questions/71541553
复制相似问题