jqPlot水平条形图点标签挑战

jqPlot Horizontal Bar Graph Point Label Challenge

本文关键字:标签 挑战 条形图 水平 jqPlot      更新时间:2023-09-26

jqPlot新手,我正在为水平图表的数据和标签而挣扎。

问题在这里。我想要的图表应该是这样的:

http://www.ifthen.biz/DesiredChart.png

我的实际图表是这样的:

http://www.ifthen.biz/ActualChart.png

似乎无法使点标签(在本例中为Yes和No)对应于每个问题的数据。

每个问题都有"是"或"否"的答案。对于每一个"是"或"否",我统计答案,以便我可以得到所需的图表。

请参阅下面的代码:

        <script>
        $(document).ready(function() {
            var q1 = [20, 58];
            var q2 = [5, 21];
            var plot1 = $.jqplot('quickStatsChart', [q1,q2], {
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    shadowAngle: 60,
                    showMarker: false,
                    rendererOptions: {
                        barDirection: 'horizontal'
                    },
                    pointLabels:{
                        show: true,
                        location: 'e',
                        labels: ['Yes','No']
                    }
                },
                axes: {
                    yaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ['Question 1', 'Question 2']
                    }
                }
            });
        });
    </script>

你知道我该怎么做吗?

+ + Tx

下面是我尝试的新代码:

        <script>
        $(document).ready(function() {
            // [ tally question 1, tally question 2]
            var sX = [[[2,'q1'], [4,'q2']],  //  Yes'
                      [[5,'q1'], [1,'q2']]]; //  No's
            var plot1 = $.jqplot('quickStatsChart', sX, {
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    shadowAngle: 60,
                    showMarker: false,
                    rendererOptions: {
                        barDirection: 'horizontal'
                    },
                    pointLabels:{
                        show: true,
                        location: 'e',
                        labels: ['Yes','No']
                    }
                },
                axes: {
                    yaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer
                    }
                }
            });
        });
    </script>

结果与上面的实际图表相同。

检查此链接正如您所看到的第二个变量数是yaxis的名称

$(document).ready(function(){
    var plot2 = $.jqplot('chart2', [
        [[2,1], [4,2], [6,3], [3,4]],
        [[5,1], [1,2], [3,3], [4,4]],
        [[4,1], [7,2], [1,3], [2,4]]], {
        seriesDefaults: {
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
            shadowAngle: 135,
            rendererOptions: {
                barDirection: 'horizontal'
            }
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});

尝试删除它是唯一的区别。如果有效,将q1改为Yes, q2改为No

pointLabels:{
    show: true,
    location: 'e',
    labels: ['Yes','No']
}