如何用線添加jqplot餅圖標籤？

我有一個餅圖，我可以爲它添加標籤正常的方式。但我想添加標籤線如下。 enter image description here 如何用線添加jqplot餅圖標籤？

我把這幅圖像從網上作爲例子。這裏是我的代碼，

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

});

}

同時，我還有一個問題，我想圖表的大膽標題，並以這種方式行不通。有沒有辦法做到這一點？

謝謝。

來源

2013-11-22 DilanG

我正在尋找相同的，不成功。但是對於標題，也許你可以嘗試用類「jqplot-title」來設置div的樣式，這就是標題的呈現位置。

jQuery的將是類似的東西：

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

編輯：

對不起，我沒有時間的jsfiddle它，但你可以嘗試，並得到了主意。看起來有點可怕，但你可以做得更好。

我所做的就是把標籤放在餡餅外面，並從中心畫一些標籤到這些標籤。

..我有這樣的事情就來了：

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

我沒有更多的時間在這本星期的工作，所以你可以使用它作爲可怕的是，使之更好。或等待更好的解決方案出現。

問候！

啊，如果你能做得更好，請與我分享。

來源

2013-11-26 01:19:51 rccursach

感謝您的想法。我會嘗試它，讓你知道如果有更好的。請讓我知道你是否有更好的答案。 – DilanG

@DilanG上述解決方案取得成功嗎？或者你有任何替代品來顯示餅圖外的標籤？ – Mihir

@Mhhir以上解決方案工作正常。但我找不到更好的解決方案。而不是我用傳說來表演標籤。 – DilanG

如何用線添加jqplot餅圖標籤？

回答

相關問題