Выберите запрос для отображения столбчатой ​​диаграммы с накоплением

Я пытаюсь создать столбчатую диаграмму с накоплением У меня есть таблица с именем FeedbackPOS, а столбцы - Q1, Q2, Q3, Q4, Q5, ... Q11, и каждый из них имеет значения от 5 до 1, например 5 или 4 или 3..1 Выберите запрос для отображения столбчатой ​​диаграммы с накоплением График (JQuery)

<script>
    $(document).ready(function () {

        $.ajax({
            type: "Post",
            url: "FeedBackGraph.aspx/getdata",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (Response) {

                var d = Response.d.toString();
                var final_string = d;
                var result = final_string.substring(1, final_string.length - 1);
                var res = final_string.split(",").map(Number);
                console.info(res);
                //final_string = [1,3,2,4];

    var options = {
        chart: {
            height: 500,
            type: 'bar',
            stacked: true,
            stackType: '100%'
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },

        },
        stroke: {
            width: 1,
            colors: ['#fff']
        },
        series: [{
            name: '5 *****',
            data: [4, 2, 5, 3, 4, 1, 2,5, 3, 1, 4]
        }, {
            name: '4 ****',
            data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1]
        }, {
            name: '3 ***',
            data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4]
        }, {
            name: '2 **',
            data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1]
        }, {
            name: '1 *',
            data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4]
        }],
        title: {
            text: 'FeedBack'
        },
        xaxis: {
            categories: ['Ambience', 'EfficiencyofService', 'FriendlyandAttentive', 'VarietyinMenu', 'Presentation', 'BeveragesQuality', 'FoodQuality', 'Anticipated', 'Money', 'ValuedGuest', 'Recommend'],
        },

        tooltip: {
            y: {
                formatter: function (val) {
                    return val + "K"
                }
            }
        },
        fill: {
            opacity: 1

        },

        legend: {
            position: 'top',
            horizontalAlign: 'left',
            offsetX: 40
        }
    }

                var chart = new ApexCharts(
                     document.querySelector("#chart"),
                     options
                 );

                chart.render();

            },
            error: function (result) {
            }
        });
    });
                    </script>

Выберите запрос для отображения столбчатой ​​диаграммы с накоплением WebMethod

     public static string getdata()
    {
        DateTime CurrentDate = System.DateTime.Now;
        string finldata = "";
        string customers = "";
        clsDBOperation obj = new clsDBOperation();
        string Query = @"select '5star' as Star, COUNT(q1) as Q1 from CRM0001FeedbackPOS where q1=5
union all select '4star' as Star, COUNT(q1) from CRM0001FeedbackPOS where q1=4
union all select '3star' as Star, COUNT(q1)  from CRM0001FeedbackPOS where q1=3
union all select '2star' as Star, COUNT(q1)  from CRM0001FeedbackPOS where q1=2
union all select '1star' as Star, COUNT(q1) from CRM0001FeedbackPOS where q1=1
select COUNT(q2) as Q2 from CRM0001FeedbackPOS where q2=5 
union all select COUNT( q2) from CRM0001FeedbackPOS where q2=4
union all select COUNT( q2)  from CRM0001FeedbackPOS where q2=3
union all select COUNT(  q2)  from CRM0001FeedbackPOS where q2=2
union all select COUNT(q2) from CRM0001FeedbackPOS where q2=1";
        DataTable dtProductMaster = obj.GetDataTable(Query);
        if (dtProductMaster.Rows.Count > 0)
        { 
            finldata = GetJsonData(dtProductMaster);
        }
        return finldata;
    }

Вывод SQLQuery

Rating| Q1

5star | 2
4star | 0
3star | 1
2star | 0
1star | 0

       Q2
        3
        0
        0
        0
        0

Ожидаемый выход

Rating| Q1  | Q2....Q11

5star | 2   | 3
4star | 0   | 0
3star | 1   | 0
2star | 0   | 0
1star | 0   | 0.....Q11

но я понятия не имею, как объединить все столбцы (q1 ... q11) в одном запросе выбора? тогда я буду использовать эти значения последовательно (в формате json) серии:

series: [{
                name: '5 *****',
                data: [4, 2, 5, 3, 4, 1, 2,5, 3, 1, 4]     // 5STAR
            }, {
                name: '4 ****',
                data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1]    // 4STAR
            }, {
                name: '3 ***',
                data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4]    // 3STAR
            }, {
                name: '2 **',
                data: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1]     // 2STAR
            }, {
                name: '1 *',
                data: [4, 2, 5, 3, 4, 1, 2, 5, 3, 1, 4]     // 1STAR
            }],
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
323
1

Ответы 1

извините, не могу оставлять комментарии из-за лимита репутации. как я вижу из вашего запроса, он будет медленным и даст много работы sql из-за всех этих объединений, как насчет того, чтобы вы поместили что-то для идентификации данных, поступающих из базы данных внутри JS? например, создать серию для данных в столбце Q1 для данных строки «5» и другую серию для значения строки данных Q1 «4»? так что вы можете просто сделать

Select  Count(q1) from Table query 

также, чтобы дать вам представление о том, что вы можете и должны проверить диаграммы devexpress в демо.

Другие вопросы по теме