【问题标题】:Select Query for Stacked Bar Chart Display选择堆积条形图显示的查询
【发布时间】:2019-03-31 21:25:35
【问题描述】:

我正在尝试制作堆积条形图 我有一个名为 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.log(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>

网络方法

     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
            }],

【问题讨论】:

    标签: c# jquery graph charts stacked-chart


    【解决方案1】:

    抱歉,由于代表限制,无法放置 cmets。 正如我从您的查询中看到的那样,由于所有这些联合,它会很慢并且会给 sql 做很多工作,您如何放置一些东西来识别来自 JS 内的数据库的数据?像为行数据'5'的Q1列中的数据创建一个系列,为Q1数据行值'4'创建另一个系列?所以你可以简单地制作一个

    Select  Count(q1) from Table query 
    

    还给您一个想法,您可以并且应该检查演示中的 devexpress 图表。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-10-04
      • 2018-11-30
      • 2013-09-13
      • 1970-01-01
      • 1970-01-01
      • 2021-03-19
      • 2021-09-07
      相关资源
      最近更新 更多