javascript - 如何添加带线条的 jqplot 饼图标签？

Question

我有一个饼图，我可以用正常的方式为它添加标签。但我想添加带有线条的标签，如下所示。

我以网络上的这张图片为例。这是我的代码，

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
    }
},

}); 

而且我还有另一个问题，我想将图表的标题加粗，但这样是行不通的。有办法吗？

谢谢。

Answer 1

我也在找，还没成功。但是对于标题，也许您可​​以尝试使用“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();
                });

这周我没有更多时间来处理这个问题，所以你可以好好利用它，让它变得更好。或者等待更好的解决方案出现。

您好!

啊，如果你能做得更好，请与我分享。