Question

jqPlot的新手，我正在努力处理水平图表的数据和标签。

这是问题所在。我想要的图表应如下所示：

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

然而，我的实际图表如下所示：

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

似乎无法获得与每个问题的数据相对应的点标签（在本例中为“是”和“否”）。

每个问题都有“是”或“否”答案。对于每个是或否我记录答案，以便我可以获得所需的图表。

请参阅以下代码：

        <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>

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

Answer 1

检查link正如您所看到的，第二个变量是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改为是，而q2改为否

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

jqPlot水平条形图点标签挑战

1 个答案: