значения highcharts из базы данных в asp.net c#

Расскажите, как получить значение из базы данных в highchart ,

Код high chart.

$(‘#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(отправитель объектов, 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 не работает

2 ответа

  1. Создайте внутренний сервис, который вернет ajax с правильным форматом, который HighChartsбудет использоваться с вашими данными из базы данных.

    1) позвоните в сервис, который должен вернуть JSON.

    2) на Ajax метод успеха принять ответ и
    постройте высокий график.

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

    Можно создать debit_amount так же, как credit_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(',') + "];";