Невозможно передать значение из C # в функцию JavaScript amcharts

Question

Я создал график с помощью amCharts, который показывает температуру из примеров на их сайте.Диаграмма отображается правильно.

Теперь я получаю температуру из базы данных с помощью C # и пытаюсь передать значение в функцию, где температура была жестко задана, поэтому я получаю динамические значения.Тем не менее, я просто получаю график, и стрелка все еще на 0 и не показывает температуру.

До сих пор я пробовал 3 способа:

1. Я использовал скрытое поле, присвоил значение скрытому полю в C # и вызвал функцию JavaScript, показывающую графики.Это показывает только график.Стрелка не меняется.

2. Я использовал диспетчер сценариев и веб-API (я не знаю, веб-API и только что использовал код в Интернете), это тот же результат, что и функция в c #продолжает непрерывно вызываться.

3. Я поместил весь код amCharts в функцию JavaScript.Я получил значения в c #, а затем использовал

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

   , который снова показывает тот же результат, на карте показано, что стрелка остается на 0.

Это мой код для 3-гоподход:

страница 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);

        }
    }
}

Answer 1

Код качества должен быть пересмотрен, но мне удалось заставить его работать. Я сделал 2 изменения:

• 1: я использовал метод «PageLoad» вместо «BindGrid» (вам действительно нужен этот?)
• 2: Я заполнил необработанное значение температуры непосредственно в качестве параметра (так как он с плавающей точкой на моей стороне), вы объединили ваше значение datarow с простой кавычкой, которая интерпретируется как строка в JavaScript и метод "showValue" из "hand" "Кажется, не терпит.

Код:

Результат:

Некоторые идеи по улучшению вашего кода:

• Поместите строку подключения в файл конфигурации (никогда в код!)
• Если вы используете «использование», не имеет значения, вызывая метод «close» вашего ресурса, он автоматически вызывается им. (за использованием это фактически try-catch-finally, закрытие в любом случае вызывается в finally;))
• Если возможно отделить доступ к данным от страницы рендеринга, создайте отдельный класс, который управляет им, это улучшит читабельность и развитие вашего кода.
• Если переменная "temp1" не используется, просто удалите ее.
• Когда вы получаете данные (независимо от источника, это может быть веб-служба, база данных или что-то еще), проверьте всегда , если оно пустое, прежде чем получить к нему доступ и зарегистрировать его, оно не стоит много и Вы избегаете эскалации исключений.
• Мы находимся в 2019 году, вы могли бы использовать Dapper , чтобы получить прямой объект в результате ваших запросов вместо общего datarow. (проверьте сайт, если интересно, у них много интересных уроков).

Kr, Али