asp.net c#中数据库中的highcharts值

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
            }]
        });
    });

后面的代码。

protected void Page_Load(object sender, 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());

}

company 数组在 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 成功方法上获取响应并 建立最高图表。