0

我有一个 jqPlot hor。像这样的条形图。jq plot - 获取线性 x 轴刻度

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

有没有简单的方法可以做到这一点？提前致谢。

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

` 函数绘制图表（） { 

    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
                            }                                
                    }
                }
            });
}`

我想要 jqplot 就像这张 flickr 图片右侧显示的那样。

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

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

4

1 回答 1

0

我遇到了同样的挑战，最后只是编写了一个函数来将内容附加到图形 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);
        };
于 2013-05-15T00:36:50.197 回答