Question

我有一个饼图，我可以正常添加标签。但我想添加带有以下行的标签。 enter image description here

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

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();
                });

本周我没有时间研究这个问题了，所以你可以把它当作可怕的并且让它变得更好。或等待更好的解决方案出现。

问候!!

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

如何用线条添加jqplot饼图标签？

1 个答案: