Question

我有一个jqPlot hor。像这样的条形图。 jq plot - getting linear x axis ticks

我希望能够放置y轴刻度标签（如软件和服务，以色列在图片中）在使用一些参数或渲染器而不是摆弄css的相应条形图的顶部。

有一种简单的方法吗？提前谢谢。

到目前为止，我的代码如下所示。

` function drawChart（）{

    var data = new Array(3);
    for (var i = 0; i < data.length; i++) {
        data[i] = new Array(2);
        data[i][0] = Math.random() * 100;
        data[i][1] = 'text-' + (i + 1);
    }

    var plot2 = $.jqplot('votingresult', [
            data,
            ], {
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                    shadow: false,
                    rendererOptions: {
                        barDirection: 'horizontal',
                        barPadding: 20,
                        barMargin: 0,
                        barWidth: 20,
                        varyBarColor: true,                            
                    }
                },
                gridPadding: { top: 0, right: 0, bottom: 0 },
                grid: {
                    drawGridLines: false,
                    drawBorder: false,
                    shadow: false
                },
                axesDefaults: {                        
                    showTicks: false,
                    shadow: false                        
                },
                axes: {
                    yaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            tickRenderer: $.jqplot.CanvasAxisTickRenderer,                                 
                            tickOptions: {                                    
                                fontSize: '10pt',                                    
                                mark: 'inside',
                                showLabel: false
                            }                                
                    }
                }
            });
}`

我想在这个flickr图片的右侧显示jqplot。

http://www.flickr.com/photos/surajshrestha/7455033636/sizes/l/in/photostream/

Jeroen：我研究过点标签。但是，在这里，我说的是轴标签在图中。

Answer 1

我遇到了同样的挑战，最后只是写了一个函数来将内容附加到图表DIV而不是试图摆弄JQPlot。您只需调整barMargin选项即可考虑间距。

        function makeSectionLabels(jsonObject, domObject, topPadding, spacing) {
            var html = "<div class='bar-chart-sections' style='padding-top:"+topPadding+"'>";
            $.each(jsonObject, function(index, value){
                html += "<h5 style='margin-bottom:"+spacing+"'>"+value+"</h5>"
            });
                html += "</div>"
            $(domObject).append(html);
        };

jqPlot水平条形图，顶部有刻度标签

1 个答案: