flot: Konnte keinen Kuchen mit Etiketten zeichnen, die in Canvas enthalten sind

Question

Ich versuche ein bisschen zu chartern und stolperte über diese seltsame Fehlermeldung. Hier ist ein Beispiel dafür, was funktioniert:

$.ajax({ 
    type: "GET", 
    dataType: "json", 
    url: "/data/active_projects_per_phase", 
    success: function (result) { 
     $.plot($("#active_per_phase"), result, { 
      series: { 
       pie: { 
        show: true, 
        label: { 
         show: true, 
         radius: 3/4, 
         formatter: function (label, series) { 
          return label + ': ' + series.data[0][1] + ' (' + Math.round(series.percent) + '%)'; 
         }, 
         background: { 
          opacity: 0.5 
         } 
        } 

       } 

      }, 
      legend: { 
       show: false 

      } 
     }); 

    } 
}); 

Die URL gibt die folgenden Daten:

[ 
    { 
    "data": 24, 
    "label": "\u0411\u0438\u0437\u043d\u0435\u0441-\u0438\u0434\u0435\u044f" 
    }, 
    { 
    "data": 31, 
    "label": "\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435" 
    }, 
    { 
    "data": 26, 
    "label": "\u0418\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435" 
    }, 
    { 
    "data": 1, 
    "label": "\u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435" 
    } 
] 

Doch es wird nicht mit diesen Daten arbeiten und die Anzeige „kann nicht Kuchen mit Etikett innen Leinwand enthalten zeichnen“ Fehler:

[ 
    { 
    "data": 6, 
    "label": "\u0417\u0430\u043a\u0440\u044b\u0442" 
    }, 
    { 
    "data": 11, 
    "label": "\u041e\u0442\u043c\u0435\u043d\u0435\u043d" 
    }, 
    { 
    "data": 1, 
    "label": "\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d" 
    }, 
    { 
    "data": 5, 
    "label": "\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442" 
    }, 
    { 
    "data": 4, 
    "label": "\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443" 
    } 
] 

Was fehlt mir im Diagramm-Setup, um dies zu überwinden?

Answer 1

Die Kreisfunktion von Flot hat Einschränkungen für die Legende und die Beschriftungen. Der Code stellt sicher, dass die Legende/Beschriftungen innerhalb der Grenzen der Zeichenfläche bleiben, und wenn dies nicht der Fall ist, schlägt sie fehl, wie Sie gesehen haben. Ihre Optionen sind:

1. Machen Sie Ihre Leinwand größer
2. Machen Sie Ihre Etiketten kürzer
3. Verwenden Sie eine Legende außerhalb der Leinwand die legend.container Option unter Verwendung eines außerhalb div angeben

Answer 2

versuchen Verringerung der Text des Etiketts, oder versuche, den Radius des Etiketts zu reduzieren, nahm ich einen Hinweis von hier http://people.iola.dk/olau/flot/examples/pie.html

ich re Der Radius meines Labels wurde verkleinert und das Problem wurde für mich behoben.