Question

我想在多列和一行中显示Legends，但即使在Legend rendererOptions中设置这些属性后，它也不会被更改，只显示在一列中。这是我正在使用的代码：

 $(document).ready(function () {
    var obj = JSON.parse("[[65,68],[88,59],[78,68],[68,69],[88,88],[75,66]]");
            $.jqplot.config.enablePlugins = true;
            plot2 = $.jqplot('chart1', obj, {
                animate: true,
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        barWidth: 25,
                        barPadding: 2,
                        shadow: false,
                    },
                    pointLabels: {
                        show: true,
                    }
                },
                series: [
                 { label: 'English' },
                 { label: 'Hindi' },
                 { label: 'Maths' },
                 { label: 'Science' },
                 { label: 'Computers' },
                 { label: 'History' }
                ],

                seriesColors: ['#C0504D', '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'],
                grid: {
                    backgroundColor: "#FFFFFF",
                    gridLineColor: '#000000',
                    drawBorder: false,
                    shadow: false,
                    gridLineWidth: 0.5
                },
                legend: {

                    show: true,

                    location:'s![enter image description here][1]',
                    placement: 'outsideGrid',
                    shrinkGrid: true,
                    rendererOptions: {
                        numberColumns: 3,
                        numberRows : 1
                    }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        ticks: ['FA 1', 'FA 2'],
                        tickOptions: {
                            angle: -90,
                            textColor: "#000000",
                            showGridline: true
                        },
                    },
                    yaxis: {
                        min: '0',
                        max: '100',
                        renderer: $.jqplot.CanvasAxisTickRenderer,
                        rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                        ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                        tickOptions: {
                            textColor: "#000000",
                            showGridline: true,
                            formatString: "%d"
                        }
                    }

                }
            });

});

Answer 1

在图例选项中设置renderer: $.jqplot.EnhancedLegendRenderer

JSFIDDLE

<强>代码

$(document).ready(function () {
    var obj = JSON.parse("[[65,68],[88,59],[78,68],[68,69],[88,88],[75,66]]");
            $.jqplot.config.enablePlugins = true;
            plot2 = $.jqplot('chart1', obj, {
                animate: true,
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        barWidth: 25,
                        barPadding: 2,
                        shadow: false,
                    },
                    pointLabels: {
                        show: true,
                    }
                },
                series: [
                 { label: 'English' },
                 { label: 'Hindi' },
                 { label: 'Maths' },
                 { label: 'Science' },
                 { label: 'Computers' },
                 { label: 'History' }
                ],

                seriesColors: ['#C0504D', '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'],
                grid: {
                    backgroundColor: "#FFFFFF",
                    gridLineColor: '#000000',
                    drawBorder: false,
                    shadow: false,
                    gridLineWidth: 0.5
                },
                legend: {
                     renderer: $.jqplot.EnhancedLegendRenderer, 
                    show: true,

                    location:'s![enter image description here][2]',
                    placement: 'outsideGrid',
                    shrinkGrid: true,
                    rendererOptions: {
                                numberRows : 1
                    }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        ticks: ['FA 1', 'FA 2'],
                        tickOptions: {
                            angle: -90,
                            textColor: "#000000",
                            showGridline: true
                        },
                    },
                    yaxis: {
                        min: '0',
                        max: '100',
                        renderer: $.jqplot.CanvasAxisTickRenderer,
                        rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
                        ticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                        tickOptions: {
                            textColor: "#000000",
                            showGridline: true,
                            formatString: "%d"
                        }
                    }

                }
            });

});

如果设置numberColumns : 1，则图例看起来像FIDDLE 它只会显示前三个系列

即使在设置numberColumns后，JQPlot图例也不显示在多列中：3

1 个答案: