我想在多列和一行中显示图例，但即使在图例渲染器选项中设置这些属性后，它也不会更改，并且仅在一列中显示。 这是我正在使用的代码:
$(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"
}
}
}
});
});
最佳答案
设置renderer: $.jqplot.EnhancedLegendRenderer在图例选项中
代码
$(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 个系列
关于即使设置 numberColumns :3 后，JQPlot 图例也不显示在多列中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15157842/