来自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成功方法上采取响应和 构建高图。