flot: Không thể vẽ bánh có nhãn chứa bên trong canvas

Question

Tôi đang cố gắng thực hiện một chút biểu đồ và gặp phải thông báo lỗi lạ này. Dưới đây là một ví dụ về những gì hoạt động:

$.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 

      } 
     }); 

    } 
}); 

Url trả về dữ liệu sau:

[ 
    { 
    "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" 
    } 
] 

Tuy nhiên, nó sẽ không làm việc với dữ liệu này và hiển thị "Không thể vẽ chiếc bánh với nhãn chứa bên trong vải" lỗi:

[ 
    { 
    "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" 
    } 
] 

Tôi đang thiếu gì trong thiết lập biểu đồ để khắc phục vấn đề này?

Answer 1

Chức năng của ô có các hạn chế đối với chú giải và nhãn. Mã này đảm bảo rằng chú giải/nhãn nằm trong ranh giới của canvas và nếu nó không thành công như bạn đã thấy. lựa chọn của bạn là:

1. Hãy canvas của bạn lớn hơn
2. Hãy nhãn của bạn ngắn hơn
3. Sử dụng một huyền thoại bên ngoài của khung hình bằng cách sử dụng tùy chọn legend.container để xác định một bên ngoài div

Answer 2

cố gắng giảm văn bản của nhãn hoặc cố gắng giảm bán kính của nhãn, tôi lấy một dấu hiệu từ đây http://people.iola.dk/olau/flot/examples/pie.html

tôi lại làm giảm bán kính của nhãn của tôi và vấn đề đã được khắc phục cho tôi.