[英]flot pie chart with long labels rendering issue
i plotted a flot pie chat with long labels, and it came out ugly, i thought it is possible to display the label far right away from the pie char or below the pie chart. 我用长标签绘制了一个flot pie聊天,它显得丑陋,我认为可以显示远离饼图或饼图下面的标签。 the javascript am using is
我正在使用的javascript是
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
}
} );
The chart 图表
does anyone know of any solution to this 有没有人知道任何解决方案
You can put the legend in a different container and place it wherever you want, using CSS. 您可以将图例放在不同的容器中,并使用CSS将其放在任何位置。
legend: {
container: '#graphLegend'
}
From the API documentation: 从API文档:
If you want the legend to appear somewhere else in the DOM, you can specify "container" as a jQuery object/expression to put the legend table into.
如果希望图例出现在DOM中的其他位置,则可以将“container”指定为jQuery对象/表达式以将图例表放入其中。 The "position" and "margin" etc. options will then be ignored.
然后将忽略“位置”和“边距”等选项。 Note that Flot will overwrite the contents of the container.
请注意,Flot将覆盖容器的内容。
I updated Mark's fiddle to demonstrate this alternative. 我更新了马克的小提琴,以展示这种选择。
You can do this with a combination of the legend's position
and margin
properties: 您可以结合使用图例的
position
和margin
属性来完成此操作:
For instance, this would push it 400 pixels to the right of the northwest
corner. 举例来说,这将推动它400个像素的右侧
northwest
角落。
legend: {
position: 'nw',
margin: [400,0]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.