Javascript 带有长标签的flot饼图呈现问题
我用长标签绘制了一个flot饼图聊天,结果很难看,我认为可以在远离饼图字符或饼图下方显示标签。我使用的javascript是Javascript 带有长标签的flot饼图呈现问题,javascript,jquery,charts,flot,pie-chart,Javascript,Jquery,Charts,Flot,Pie Chart,我用长标签绘制了一个flot饼图聊天,结果很难看,我认为可以在远离饼图字符或饼图下方显示标签。我使用的javascript是 function onSuccess(series) { var tickLabels = []; var pieData= []; for (var i =0;i<series.length;i++){ tickLabels.push([i,series[i][
function onSuccess(series) {
var tickLabels = [];
var pieData= [];
for (var i =0;i<series.length;i++){
tickLabels.push([i,series[i][0]]);
var obj = {};
obj['label']=series[i][0];
obj['data']=series[i][1];
pieData.push(obj);
series[i][0] = i;
}
var data = [series];
var pieArea = $("#pieChart");
pieArea.css("height", "400px");
pieArea.css("width", "600px");
$.plot( $("#barChart"), data, {
series: {
bars: {
show:true,
barWidth: 0.5,
align: "center"
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
xaxis: {
labelWidth:12,
labelAngle: 45,
ticks: tickLabels
}
} );
成功时的函数(系列){
var=[];
var pieData=[];
对于(var i=0;i您可以使用图例的
位置
和边距
属性的组合来执行此操作:
例如,这将把它推到northwest
角的右侧400像素
legend: {
position: 'nw',
margin: [400,0]
}
请参阅fiddle。您可以使用CSS将图例放在不同的容器中,并将其放置在任何您想要的位置
legend: {
container: '#graphLegend'
}
从API文档中:
如果希望图例显示在DOM中的其他位置,可以
指定“container”作为jQuery对象/表达式以放置图例
将表格分为“头寸”和“保证金”等选项
忽略。请注意,Flot将覆盖容器的内容
我更新了以演示此选项。我实际上使用了您的代码,谢谢,但mark先回答了,他的代码也很好。如何旋转条形图示例中的标签,我尝试了labelAngle,但没有成功