如何用线条添加jqplot饼图标签？ [英] How to add jqplot pie chart labels with lines?

问题描述

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

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

  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，
 //直径：30 
}，
 axesDefaults：{
 
}，
荧光笔： {
 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>）

编辑：

抱歉，我没有时间讨价还价，但是你可以尝试并获得想法。看起来有点糟糕，但你可以做得更好。

我所做的就是将切片的标签放在馅饼外，并从中心画出一些线条到这些标签。 / p>

..我来的是这样的：

 系列：[ {
渲染器：$ .jqplot.PieRenderer，
 rendererOptions：{
直径：140，
 showDataLabels：true，
 dataLabelThreshold：0，//显示的最小区域一个标签，（我想要所有的标签）
 dataLabelPositionFactor：2.3，//在半径的函数中，显示标签的距离
 dataLabels：'label'，
 dataLabelFormatString：'％s '，
 
 //（只是更多选项等等）
 
 
 plot = $ .jqplot（myDivHere，[data]，options）。重制（）; //<  - 那对我来说是
 
 
 // *************************** *** 
 //这里是魔法：
 // 
 
 
 var w = $（＃myDivHere .jqplot-series-shadowCanvas）。宽度（）; 
 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是：[+ x1 +， + y1 +] \ nl，t是[+ l +，+ t +]）; 
 context.beginPath（）; 
 context.moveTo（x1，y1）; 
 context.lineTo（l，t）; 
 context.stroke（）; 
}）; 
  

本周我没有时间处理这个问题，所以你可以使用它，因为它很糟糕并使它更好。或者等待更好的解决方案出现。

问候!!

啊，如果你能做的话它更好，请与我分享。

I have a pie chart and I can add labels for it normal way.But I want to add labels with line as following.

I took this image from web as a example. here is my code ,

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

}); 

}

And also I have another problem I want to bold the title of the chart and in this way it doesn't work. Is there a way to do that?

Thank you.

解决方案

i'm looking for the same, not successful yet. but for the title maybe you can try to style the div with the class "jqplot-title", that's where the title is rendered.

in jquery would be something like that:

$(".jqplot-title").wrap("<b></b>")

EDIT:

sorry i had no time to jsfiddle it, but you can try it and get the idea. looks a little awful but you can make it better.

what i did was putting labels of the slices outside the pie and draw some lines from the center to these labels.

..i came with something like this:

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

I have no more time to work on this this week, so you could use it as awful it is and make it better. or wait for a better solution to show up.

Greetings!!

Ahh, and if you can make it better, please share it with me.

这篇关于如何用线条添加jqplot饼图标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！