javascript - 如何在 ASP.NET Web 应用程序的 C# 代码中集成 chart.js 线性仪表或圆形仪表

问题描述

我正在尝试使用 ASP.NET 构建一个 Web 应用程序，它将连接到 SQL 服务器并创建一个分析仪表板。

对于仪表板，我使用的是chart.js 库，其中包括线性仪表图表和圆形仪表图表。仪表的原始代码写在 .aspx 文件中，如下所示：（在圆形仪表链接中也是这样写的）

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gauge Chart with datalabels plugin displaying labels</title>
  <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
  <script src="https://unpkg.com/chartjs-gauge@0.2.0/dist/chartjs-gauge.js"></script>
  <script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.js"></script>
</head>

<script>
  var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
  };

  var randomData = function() {
    return [
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor()
    ];
  };

  var randomValue = function(data) {
    return Math.max.apply(null, data) * Math.random();
  };

  var data = randomData();
  var value = randomValue(data);

  var config = {
    type: 'gauge',
    data: {
      labels: ['Success', 'Warning', 'Warning', 'Fail'],
      datasets: [{
        data: data,
        value: value,
        backgroundColor: ['green', 'yellow', 'orange', 'red'],
        borderWidth: 2
      }]
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'Gauge chart with datalabels plugin displaying labels'
      },
      layout: {
        padding: {
          bottom: 30
        }
      },
      needle: {
        // Needle circle radius as the percentage of the chart area width
        radiusPercentage: 2,
        // Needle width as the percentage of the chart area width
        widthPercentage: 3.2,
        // Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
        lengthPercentage: 80,
        // The color of the needle
        color: 'rgba(0, 0, 0, 1)'
      },
      valueLabel: {
        display: false
      },
      plugins: {
        datalabels: {
          display: true,
          formatter: function(value, context) {
            return context.chart.data.labels[context.dataIndex];
          },
          //color: function (context) {
          //  return context.dataset.backgroundColor;
          //},
          color: 'rgba(0, 0, 0, 1.0)',
          //color: 'rgba(255, 255, 255, 1.0)',
          backgroundColor: null,
          font: {
            size: 20,
            weight: 'bold'
          }
        }
      }
    }
  };

  window.onload = function() {
    var ctx = document.getElementById('chart').getContext('2d');
    window.myGauge = new Chart(ctx, config);
  };

  document.getElementById('randomizeData').addEventListener('click', function() {
    config.data.datasets.forEach(function(dataset) {
      dataset.data = randomData();
      dataset.value = randomValue(dataset.data);
    });

    window.myGauge.update();
  });
</script>

<body>
  <div id="canvas-holder" style="width:100%">
    <canvas id="chart"></canvas>
  </div>
  <button id="randomizeData">Randomize Data</button>
</body>

</html>

这是我的页面加载器配置以及与 SQL 服务器的连接，我还包含了一个如何在 C# 上呈现图表的示例：

protected void Page_Load(object sender, EventArgs e)
        {

            //Connect to the SQL server
            string myConnection = ConfigurationManager.ConnectionStrings["DataBaseConnectionString"].ConnectionString;
            SqlConnection con = new SqlConnection(myConnection);
            String query = "SELECT* FROM DADLoggerTable";
            SqlCommand cmd = new SqlCommand(query, con);
            DataTable tb = new DataTable();
            try
            {
                con.Open();

                SqlDataReader dr = cmd.ExecuteReader();
                tb.Load(dr, LoadOption.OverwriteChanges);
                con.Close();
            }
            catch { }
            //Check if there is data in the datatable
            if (tb != null)
            {
                //This is an example of how I included a chart
                String chart = "";
                chart = "<canvas id=\"line-chart\" width=\"120%\" height=\"30\"></canvas>";
                chart += "<script>";
                chart += "new Chart(document.getElementById(\"line-chart\"), { type: 'line', data: {labels: [";


                //Select the first 460 data points
                for (int i = 0; i < 460; i++)
                    chart += i.ToString() + ",";
                chart = chart.Substring(0, chart.Length - 1);

                chart += "],datasets: [{ data: [";

                //Select data from the database and add to chart
                String value = "";
                for (int i = 0; i < tb.Rows.Count; i++)
                    value += tb.Rows[i]["Engine_Hours"].ToString() + ",";
                value = value.Substring(0, value.Length - 1);
                chart += value;

                chart += "],label: \"Engine Hours\",borderColor: \"#cd3e3e\",fill: true}"; // Chart color
                chart += "]},options: { title: { display: true,text: 'Engine Hours (hr)'} }"; // Chart title
                chart += "});";
                chart += "</script>";

                //Render the chart
                Literal1.Text = chart;
               }
          }        
    }
}

如何从 SQL 服务器中选择值并将它们提供给仪表。此外，如何使仪表响应来自 SQL 服务器的传入数据并使其在不加载网页的情况下更新。

我知道这将需要在 javascript 中调用 ajax，在我的情况下如何实现 ajax 调用，我还没有能够成功地做到这一点。

我会很感激的。

标签： javascriptc#htmlajaxweb

javascript - 如何在 ASP.NET Web 应用程序的 C# 代码中集成 chart.js 线性仪表或圆形仪表

问题描述

解决方案

推荐阅读