來自ASP.NET C＃中數據庫的highcharts值

Question

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

高圖表代碼。

$（'＃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

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

1）調用您的服務，該服務應返回正確的json。

2）在Ajax成功方法上，獲取響應並構建高圖表。

Answer 2

您的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(',') + "];";