2

複数の列と 1 つの行で凡例を表示したいのですが、Legend rendererOptions でこれらのプロパティを設定した後でも、変更されず、1 つの列にしか表示されません。これは私が使用しているコードです:

 $(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"
                        }
                    }

                }
            });

});
4

1 に答える 1

3

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のよう になります。最初の 3 つのシリーズのみが表示されます

于 2013-03-04T02:49:48.617 に答える