データテーブルから読み込まれたheadタグの動的javascript - asp.net

Question

特定の統計クエリに応じて異なる種類のグラフを表示するページを作成しようとしています。

たとえば、決定されたタイプのデータの場合、私は円グラフを表示する必要があります。私は非常に便利な方法でこのタイプを表示するJSプラグインがあります。

ここでは、SQLデータベースのデータテーブルからこのグラフを作成する必要があります。

これはJSコードである：

<script type="text/javascript"> 

     window.onload = function() { 
      var chart = new CanvasJS.Chart("chartContainer", { 
       title: { 
        text: "Semestre de ingreso" 
       }, 
       data: [ 
       { 
        // Change type to "doughnut", "line", "splineArea", etc. 
        type: "pie", 
        dataPoints: [ 
         { label: "apple", y: 10 }, 
         { label: "orange", y: 15 }, 
         { label: "banana", y: 25 }, 
         { label: "mango", y: 30 }, 
         { label: "grape", y: 28 } 
        ] 
       } 
       ] 
      }); 
      chart.render(); 
     } 
    </script> 

私はライン 必要{ラベル： "リンゴ"、Y：10}このクエリを使用して、データテーブルから読み込ま、

取得し、そのSPROCで書かれている：

SELECT 
    [dbo].[Actualizacion_Datos_Estudiantes].[SemestreIngreso], 
    COUNT(*) AS [SemIngNum], 
    CAST(ROUND((COUNT(*) * 100.0/(SELECT COUNT(*) FROM [dbo].[Actualizacion_Datos_Estudiantes])),2) AS numeric(18,2)) AS [Prc] 
FROM [dbo].[Actualizacion_Datos_Estudiantes] 

GROUP BY 
    [dbo].[Actualizacion_Datos_Estudiantes].[SemestreIngreso] 

ORDER BY 
    [dbo].[Actualizacion_Datos_Estudiantes].[SemestreIngreso] ASC 

だから「りんご」は「SemestreIngreso」欄、およびyで置き換えられます：10、「中国」の列に置き換えられます。

ヘルプ！ありがとう。

Answer 1

ヘッドタグにasp：PlaceHolderを使用して解決しました。

このプレースホルダには、スクリプトの基本部分が含まれています。コードの後ろには、データテーブルの結果が印刷されます。

ので、コードは次のようになります：headタグで

：bodyタグで

<asp:PlaceHolder ID="PlaceHolder1" runat="server"> 
    <script type="text/javascript"> 

     window.onload = function() { 
      <asp:Literal ID="LiteralGraph01" runat="server"></asp:Literal> 
      <asp:Literal ID="LiteralGraph02" runat="server"></asp:Literal> 
     } 
    </script> 

</asp:PlaceHolder> 

、グラフを描画しますDIV：

<div id="chartContainer01" style="height: 300px; width: 100%;"></div> 
<div id="chartContainer02" style="height: 300px; width: 100%;"></div> 

そして、背後にあるコードで：

Dim dataPrintGr01 As String 
     Dim dataPrintGr02 As String 


     Dim SqlConGr01 As SqlConnection 
     Dim SqlComGr01 As SqlCommand 
     Dim SqlDRGr01 As SqlDataReader 
     SqlConGr01 = New SqlConnection(ConfigurationManager.ConnectionStrings("EnchufeUNICOC").ToString()) 
     SqlComGr01 = New SqlCommand("SEL_Actualizacion_Datos_Estudiantes_Demografia_SemestreIngreso", SqlConGr01) 
     SqlComGr01.CommandType = CommandType.StoredProcedure 
     If SqlConGr01.State = ConnectionState.Closed Then 
      SqlConGr01.Open() 
     End If 
     SqlDRGr01 = SqlComGr01.ExecuteReader() 
     While SqlDRGr01.Read() 
      dataPrintGr01 += "{ label: '" & SqlDRGr01("SemestreIngreso") & "', y: " & SqlDRGr01("Prc") & " }," 
     End While 
     SqlDRGr01.Close() 
     SqlConGr01.Close() 

     LiteralGraph01.Text = "var chart = new CanvasJS.Chart('chartContainer01', {" & _ 
          "title: {" & _ 
           "text: 'Semestre de ingreso'" & _ 
          "}," & _ 
          "data: [" & _ 
          "{" & _ 
           "type: 'pie'," & _ 
           "dataPoints: [" & _ 
            dataPrintGr01 & _ 
           "]" & _ 
          "}" & _ 
          "]" & _ 
         "});" & _ 
         "chart.render();" 

     Dim SqlConGr02 As SqlConnection 
     Dim SqlComGr02 As SqlCommand 
     Dim SqlDRGr02 As SqlDataReader 
     SqlConGr02 = New SqlConnection(ConfigurationManager.ConnectionStrings("EnchufeUNICOC").ToString()) 
     SqlComGr02 = New SqlCommand("SEL_Actualizacion_Datos_Estudiantes_Demografia_Programa", SqlConGr02) 
     SqlComGr02.CommandType = CommandType.StoredProcedure 
     If SqlConGr02.State = ConnectionState.Closed Then 
      SqlConGr02.Open() 
     End If 
     SqlDRGr02 = SqlComGr02.ExecuteReader() 
     While SqlDRGr02.Read() 
      dataPrintGr02 += "{ label: '" & SqlDRGr02("ProgramaPrint") & "', y: " & SqlDRGr02("Prc") & " }," 
     End While 
     SqlDRGr02.Close() 
     SqlConGr02.Close() 

     LiteralGraph02.Text = "var chart = new CanvasJS.Chart('chartContainer02', {" & _ 
         "title: {" & _ 
          "text: 'Programa'" & _ 
         "}," & _ 
         "data: [" & _ 
         "{" & _ 
          "type: 'pie'," & _ 
          "dataPoints: [" & _ 
           dataPrintGr02 & _ 
          "]" & _ 
         "}" & _ 
         "]" & _ 
        "});" & _ 
        "chart.render();"