我在 amCharts 的帮助下创建了一个图表,显示其网站上示例的温度。图表正确显示。
现在,我使用 C# 从数据库获取温度,并尝试将值传递给对温度进行硬编码的函数,以便获得动态值。但是,我刚刚拿到图表,指针仍处于 0,并没有显示温度。
到目前为止我已经尝试了3种方法:
- 我使用了隐藏字段,将值分配给 C# 中的隐藏字段,并调用显示图表的 JavaScript 函数。它仅显示图表。针没有变化。
我使用了脚本管理器和Web API(我不知道Web API,只是使用了互联网上的代码),结果是相同的,但是c#中的函数不断被调用。
我将整个 amCharts 代码放入 JavaScript 函数中。我在 C# 中获取了值,然后使用
String script = "window.onload = function() { UpdateTemp('" + dt.Rows[0][0].ToString()+ "'); };"; ClientScript.RegisterStartupScript(this.GetType(), "UpdateTemp", script, true);
再次显示相同的结果, map 显示指针停留在 0。
这是我的第三种方法的代码:
ASPX页面,JavaScript函数
<script>
function UpdateTemp(temp) {
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// create chart
var chart = am4core.create("chartdiv", am4charts.GaugeChart);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart.innerRadius = -25;
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
axis.renderer.grid.template.stroke = new am4core.InterfaceColorSet().getFor("background");
axis.renderer.grid.template.strokeOpacity = 0.3;
var colorSet = new am4core.ColorSet();
var range0 = axis.axisRanges.create();
range0.value = 0;
range0.endValue = 50;
range0.axisFill.fillOpacity = 1;
range0.axisFill.fill = colorSet.getIndex(0);
range0.axisFill.zIndex = - 1;
var range1 = axis.axisRanges.create();
range1.value = 50;
range1.endValue = 80;
range1.axisFill.fillOpacity = 1;
range1.axisFill.fill = colorSet.getIndex(2);
range1.axisFill.zIndex = -1;
var range2 = axis.axisRanges.create();
range2.value = 80;
range2.endValue = 100;
range2.axisFill.fillOpacity = 1;
range2.axisFill.fill = colorSet.getIndex(4);
range2.axisFill.zIndex = -1;
var hand = chart.hands.push(new am4charts.ClockHand());
// using chart.setTimeout method as the timeout will be disposed together with a chart
chart.setTimeout(randomValue, 2000);
function randomValue(temp) {
hand.showValue(temp, 1000, am4core.ease.cubicOut);
chart.setTimeout(randomValue, 2000);
}
}); // end am4core.ready()
};
</script>
C#函数获取温度并调用JavaScript函数
public void BindGrid(String charttype)
{
string constring = "Data Source=********.DOMAIN.ORG01;Initial Catalog=Temperature;Integrated Security=SSPI;";
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("SELECT Temperature,HighestPoint,LowestPoint FROM Temperature", con))
{
cmd.CommandType = CommandType.Text;
con.Open();
DataTable dt = new DataTable();
dt.Load(cmd.ExecuteReader());
temp1.Value = dt.Rows[0][0].ToString();
con.Close();
String script = "window.onload = function() { UpdateTemp('" + dt.Rows[0][0].ToString()+ "'); };";
ClientScript.RegisterStartupScript(this.GetType(), "UpdateTemp", script, true);
}
}
}
最佳答案
质量代码应该修改,但我设法让它工作。 我做了 2 处更改:
- 1:我使用了“PageLoad”方法而不是“BindGrid”(您真的需要这个方法吗?)
- 2:我直接填充原始温度值作为参数(因为它是我这边的 float ),你用简单的引号包含了你的数据行值,它被 javascript 和“hand”中的“showValue”方法解释为字符串“似乎无法容忍。
结果:
改进代码的一些想法:
- 将连接字符串放入配置文件中(切勿放入代码中!)
- 如果您使用“using”,则无论调用资源的“close”方法,它都会自动被调用。 (在 using 后面实际上是一个 try-catch-finally,无论如何在 finally 中都会调用 close ;) )
- 如果可能,将数据访问与呈现页面分开,创建一个单独的类来管理它,这将提高代码的可读性和改进。
- 如果变量“temp1”未被使用,只需将其删除即可。
- 当您获取数据(无论来源如何,可能是网络服务或数据库或其他)时,在访问它并记录它之前始终检查它是否为空,这不会花费太多并且您可以避免异常升级。
- 我们已经进入 2019 年了,您可以使用 Dapper直接获取查询结果对象,而不是通用数据行。 (如果有兴趣,请查看网站,他们有很多有趣的教程)。
克尔, 阿里
关于javascript - 无法将值从 C# 传递到 amcharts JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55842082/