javascript - 无法将值从 C# 传递到 amcharts JavaScript 函数

问题描述

我在 amCharts 的帮助下创建了一个图表，显示了他们网站上示例中的温度。图表显示正确。

现在我正在使用 C# 从数据库中获取温度，并且我试图将值传递给温度被硬编码的函数，所以我得到了动态值。但是，我刚拿到图表，指针仍为 0，不显示温度。

到目前为止，我已经尝试了 3 种方法：

我使用了一个隐藏字段，将值分配给 C# 中的隐藏字段并调用显示图表的 JavaScript 函数。它只显示图表。针没有变化。
我使用了脚本管理器和 Web API，（我不知道 Web API，只是在 Internet 上使用过代码），结果相同，但是 c# 中的函数不断被调用。

我将整个 amCharts 代码放在一个 JavaScript 函数中。我在 c# 中得到了值，然后使用

String script = "window.onload = function() { UpdateTemp('" + dt.Rows[0][0].ToString()+ "'); };";
ClientScript.RegisterStartupScript(this.GetType(), "UpdateTemp", script, true);

再次显示相同的结果，地图显示针停留在 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>

获取温度并调用 JavaScript 函数的 C# 函数

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

        }
    }
}

标签： javascriptc#amchartsgauge

应该修改质量代码，但我设法使它工作。我做了2个改变：

1：我使用了“PageLoad”方法而不是“BindGrid”（你真的需要这个吗？）
2：我将原始温度值直接填充为参数（因为它在我这边是一个浮点数），你用简单的引号将你的数据行值包含在内，这被javascript解释为字符串，并且来自“hand”的方法“showValue”似乎不能容忍它。

代码：

结果：

一些改进代码的想法：

将您的连接字符串放在配置文件中（永远不要在代码中！）
如果您使用“使用”，则调用资源的“关闭”方法无关紧要，它会自动调用它。（在使用它实际上是一个 try-catch-finally 之后，无论如何都会在 finally 中调用 close ;) ）
如果可能的话，将数据访问与渲染页面分开，创建一个单独的类来管理它，它将提高代码的可读性和演化。
如果不使用变量“temp1”，只需将其删除。
当您获取数据时（无论来源如何，可能是 Web 服务或数据库或其他），在访问并记录它之前始终检查它是否为空，它不会花费很多，并且您可以避免异常升级。
我们在 2019 年，您可以使用Dapper从查询中直接获取对象，而不是使用通用数据行。（如果有兴趣，请查看网站，他们有很多有趣的教程）。

克鲁，阿里

javascript - 无法将值从 C# 传递到 amcharts JavaScript 函数

问题描述

解决方案

推荐阅读