來自asp.net數據庫的highcharts值c＃

Question

告訴我如何從數據庫中獲取價值到highchart，

高圖的代碼。 。

$（ '＃account_details_chart'）highcharts（{ 圖表：{ 類型： 'areaspline' }，

  legend: { 
       layout: 'inline-block', 
       align: 'right', 
       verticalAlign: 'top', 
       x: 0, 
       y: 10, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
      }, 
      xAxis: { 
       categories: company, 
       plotBands: [{ // visualize the weekend 
        from: 6.5, 
        to: 6.5, 
        color: 'rgba(68, 170, 213, .2)' 
       }] 
      }, 
      yAxis: { 
       title: { 
        text: 'Amount In Rupees' 
       } 
      }, 
      tooltip: { 
       shared: true, 
       valuePrefix: 'Rs. ', 
       valueSuffix: ' /-' 
      }, 
      credits: { 
       enabled: true 
      }, 
      plotOptions: { 
       areaspline: { 
        fillOpacity: 0.5 
       } 
      }, 
      series: [{ 
       name: 'Debit Amount', 
       data: debit_amount 
      }, { 
       name: 'Credit Amount', 
       data: credit_amount 
      }] 
     }); 
    }); 

代碼後面

保護無效的Page_Load（對象發件人，EventArgs e） {

List<string> tempString = new List<string>(); 
    tempString.Add("Hello"); 
    tempString.Add("World"); 
    tempString.Add("Hello"); 
    tempString.Add("World"); 
    tempString.Add("Hello"); 
    tempString.Add("World"); 
    //string builder for binding data in script 
    StringBuilder sb = new StringBuilder(); 
    sb.Append("<script>"); 
    sb.Append("var company = new Array;"); 
    foreach (string str in tempString) 
    { 
     sb.AppendFormat("company.push('{0}');", str); 
    } 
    sb.Append("</script>"); 
    //sending data through client script register 
    ClientScript.RegisterStartupScript(this.GetType(), "TestArrayScript", sb.ToString()); 

    List<int> DebitAmount = new List<int>(); 
    DebitAmount.Add(2); 
    DebitAmount.Add(3); 
    DebitAmount.Add(2); 
    DebitAmount.Add(4); 

    StringBuilder sb2 = new StringBuilder(); 
    sb2.Append("<script type='text/javascript'>"); 
    sb2.Append("var debit_amount = new Array;"); 
    foreach (int str2 in DebitAmount) 
    { 
     sb2.AppendFormat("debit_amount.push('{0}');", str2); 
    } 
    sb2.Append("</script>"); 
    //sending data through client script register 

    ClientScript.RegisterStartupScript(GetType(), "ArrayScript", sb2.ToString()); 

} 

公司數組工作正常x軸但debit_amount陣列不起作用

Answer 1

您的debit_amount和credit_amount不是一個正確的數組。

 var company = ['Ford', 'Toyota', 'Suzuki', 'Opel', 'BMW', 'Mercedes']; 
     var debit_amount = [['AAA', 34.03], ['BBB', 27.01], ['CCC', 18.77], ['DDD', 11.01], ['EEE', 5.91], ['FFF', 3.27]]; 
     var credit_amount = [6, 8, 2, 46, 57, 76]; 

     $('#account_details_chart').highcharts({ 
      chart: { type: 'areaspline' }, 
      legend: { 
       layout: 'inline-block', 
       align: 'right', 
       verticalAlign: 'top', 
       x: 0, 
       y: 10, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
      }, 
      xAxis: { 
       categories: company, 
       plotBands: [{ // visualize the weekend 
        from: 6.5, 
        to: 6.5, 
        color: 'rgba(68, 170, 213, .2)' 
       }] 
      }, 
      yAxis: { 
       title: { 
        text: 'Amount In Rupees' 
       } 
      }, 
      tooltip: { 
       shared: true, 
       valuePrefix: 'Rs. ', 
       valueSuffix: ' /-' 
      }, 
      credits: { 
       enabled: true 
      }, 
      plotOptions: { 
       areaspline: { 
        fillOpacity: 0.5 
       } 
      }, 
      series: [{ 
       name: 'Debit Amount', 
       data: debit_amount 
      }, { 
       name: 'Credit Amount', 
       data: credit_amount 
      }] 
     }); 

您可以以同樣的方式作爲credit_amount創建debit_amount，但隨後 你不會有在圖表上的每個點的標籤。

而且您不需要編寫一個字符串，它將JavaScript中的數組值推入。您只需以陣列格式編寫完整的字符串即可。

 StringBuilder sb2 = new StringBuilder(); 
     sb2.Append("var debit_amount = ["); 
     foreach (int str2 in DebitAmount) 
     { 
      sb2.Append("['AAA', " + str2 + "],"); 
     } 
     Literal1.Text = sb2.ToString().TrimEnd(',') + "];"; 

Answer 2

創建內部服務將返回一個格式正確的ajax，其中HighCharts將與您的數據庫中的數據一起使用。

1）打電話給你的服務，它應該返回適​​當的json。

2）在Ajax成功方法上採取響應和 構建高圖。