Gradients trên Flot

Question

Làm cách nào tôi có thể đặt hiệu ứng gradient trên biểu đồ hình tròn?

[{ 
label: i, 
data: 1000, 
color: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] 
}, 
//nextserie 
] 

không hoạt động.

Ngoài ra làm cách nào tôi có thể đặt hiệu ứng gradient làm màu mặc định cho biểu đồ của mình? Trong cách bạn có thể lập chỉ mục theo số như:

[{ 
label: i, 
data: 1000, 
color: 1, 
}, 
//nextserie 
] 

Answer 1

Tôi hiện đã thêm hỗ trợ để hiển thị biểu đồ hình tròn với các độ dốc, là hình tròn hoặc tuyến tính. Cam kết của tôi được tham chiếu trong pull request #853.

Một ví dụ "mặc định" biểu đồ hình tròn với một gradient xuyên tâm:

$.plot($("#default_gradient"), data, { 
    series: { 
     pie: { 
     show: true, 
     gradient: { 
      radial: true, 
      colors: [ 
      {opacity: 0.5}, 
      {opacity: 1.0} 
      ] 
     } 
     } 
    } 
}); 

Một biểu đồ bánh rán ví dụ với một gradient xuyên tâm:

$.plot($("#donut_gradient"), data, 
    { 
    series: { 
     pie: { 
     innerRadius: 0.5, 
     show: true, 
     gradient: { 
      radial: true, 
      colors: [ 
      {opacity: 1.0}, 
      {opacity: 1.0}, 
      {opacity: 1.0}, 
      {opacity: 0.5}, 
      {opacity: 1.0} 
      ] 
     } 
     } 
    } 
}); 

Một ví dụ về biểu đồ hình tròn nghiêng với ar adial gradient:

$.plot($("#graph9_gradient"), data, 
    { 
    series: { 
     pie: { 
     show: true, 
     radius: 1, 
     tilt: 0.5, 
     gradient: { 
      radial: true, 
      colors: [ 
      {opacity: 0.5}, 
      {opacity: 1.0} 
      ] 
     }, 
     label: { 
      show: true, 
      radius: 1, 
      formatter: function(label, series){ 
      return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>'; 
      }, 
      background: { opacity: 0.8 } 
     }, 
     combine: { 
      color: '#999', 
      threshold: 0.1 
     } 
     } 
    }, 
    legend: { 
     show: false 
    } 
    }); 

Những thay đổi dựa trên sự kết hợp các đề nghị trên bởi @Hoffman và a patch đề nghị đề xuất trong Flot issue #355 bởi Luc Boudreau.

Answer 2

Thư viện hiện không hỗ trợ điều đó. Nếu bạn cảm thấy thoải mái khi hợp nhất các bản vá, có một bản sao được gửi cùng với issue 355 (hãy nhấp vào liên kết đến vấn đề ban đầu của Google Code để nhận tệp đính kèm) thêm gradient vào bánh nướng. Tuy nhiên, tôi chưa thử nó.

Answer 3

Ok, vì vậy tôi đã tự làm. Đã cho tôi một thời gian để hiểu làm thế nào flot hoạt động nội bộ, nhưng cuối cùng tôi tìm thấy một phần mà tôi cần phải thay đổi. Trên jquery.flot.pie.js, hãy thay đổi hàm drawSlice (dòng 406 trên Flot 0.7) thành:

  function drawSlice(angle, color, fill) 
      { 
       if (angle<=0) 
        return; 


       if (fill) { 
        if (typeof color === "object") { 
         var grad= ctx.createRadialGradient(0, 0, 0, 0, 0, radius); 
         var i; 
         var numColors= color.colors.length; 
         for (i=0; i< numColors ; i++) { 
          grad.addColorStop(i/(numColors-1), color.colors[i]); 
         } 
         ctx.fillStyle = grad; 
        } else { 
         ctx.fillStyle = color; 
        } 
        ctx.fillStyle = color; 
       } else { 
        ctx.strokeStyle = color; 
        ctx.lineJoin = 'round'; 
       } 

không xóa phần còn lại của mã sau nếu.

Và cũng giống như ma thuật bây giờ bạn có thể xác định hàng loạt của bạn với màu sắc radial gradient:

[{ 
      label: i, 
      data: Math.random() *1000, 
      color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] } 
}] 

Tôi sẽ cố gắng để tạo ra một biểu đồ mát mẻ sau đó tôi sẽ chụp màn hình nó và trả lời ở đây.

EDIT: Tại đây bạn đi:

var d1= []; 
    d1.push({ 
     label: "Crítico", 
     data: Math.random() *1000, 
     color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] } 
    }); 
    d1.push({ 
     label: "Médio", 
     data: Math.random() *1000, 
     color: { colors: [ "rgb(110,110,190)", "rgb(70, 70, 140)", "rgb(50, 50, 110)", "rgb(10, 10, 60)" ] } 
    }) 
this.plot= $.plot($div, d1); 

Đó là tốt hơn rất nhiều so với sử dụng màu sắc rắn, nhưng nó có thể trở nên tốt hơn rất nhiều, tôi chỉ xấu ở màu sắc chọn. Bây giờ tôi tìm thấy một vấn đề nhỏ, truyền thuyết không làm việc với những thay đổi của tôi, không có màu sắc sẽ được hiển thị trên chúng. Tôi không sẵn sàng sửa lỗi vì chức năng đó có mặt trên tập tin Flot lõi (lớn hơn và phức tạp hơn nhiều so với plugin của chiếc bánh) và tôi không có nhiều thời gian rảnh để gây rối với điều đó.