我有一个饼图,我可以正常方式为其添加标签。但我想添加带有以下行的标签。
我以网络上的这张图片为例。这是我的代码,
drawPieCharts = function(dev,title,data){
$('#'+dev).empty();
var plot = $.jqplot(dev, [data], {
title: {
text: title,
fontWeight: 'bold',
fontSize : '16',
show: true
},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow:false,
//diameter : 30
},
axesDefaults: {
},
highlighter: {
show: true,
formatString:'%s , P%',
tooltipLocation:'n',
useAxesFormatters:false
},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabelThreshold: 0,
dataLabelPositionFactor: 1.05,
dataLabels : mapSeperater(data)[0],
padding: 2
}
},
});
}
而且我还有另一个问题,我想将图表的标题加粗,这样它就不起作用了。有办法做到这一点吗?
谢谢。
最佳答案
我正在寻找相同的,但尚未成功。 但对于标题,也许您可以尝试使用“jqplot-title”类来设置 div 样式,这就是标题呈现的位置。
在 jquery 中会是这样的:
$(".jqplot-title").wrap("<b></b>")
编辑:
抱歉,我没有时间摆弄它,但你可以尝试一下并了解想法。看起来有点糟糕,但你可以让它变得更好。
我所做的是将切片的标签放在饼图外面,并从中心到这些标签画一些线。
..我带来了这样的东西:
series: [{
renderer: $.jqplot.PieRenderer,
rendererOptions: {
diameter: 140,
showDataLabels: true,
dataLabelThreshold: 0, //minimum area to show a label, (i want all the labels)
dataLabelPositionFactor: 2.3, //in function of the radius, how far show the label
dataLabels: 'label',
dataLabelFormatString: '%s',
//(just more options, etc, etc)
plot = $.jqplot("myDivHere", [data], options).replot(); // <-- that's for me
// ******************************
// HERE COMES THE MAGIC:
//
var w = $("#myDivHere .jqplot-series-shadowCanvas").width();
var h = $("#myDivHere .jqplot-series-shadowCanvas").height();
x1 = (w/2);
y1 = (h/2);
var canvas = $("#myDivHere .jqplot-series-shadowCanvas")[0];
var context = canvas.getContext('2d');
$(".jqplot-pie-series.jqplot-data-label").each(
function(){
var l = $(this).position().left;
var t = $(this).position().top;
console.log("x1, y1 are: ["+x1+", "+y1+"]\n l, t are ["+l+", "+t+"]");
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(l, t);
context.stroke();
});
这周我没有更多的时间来处理这个问题,所以你可以利用它,让它变得更好。或者等待更好的解决方案出现。
问候!!
啊,如果你能做得更好,请与我分享。
关于javascript - 如何添加带有线条的jqplot饼图标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20137852/