Degradados en Flot

Question

¿Cómo puedo establecer efectos de degradado en gráficos circulares?

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

no funciona.

Además, ¿cómo puedo establecer efectos de degradado como colores predeterminados para mis gráficos? En la forma en que puede indexarlo por número como:

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

Answer 1

Ahora he agregado soporte para renderizar gráficos circulares con degradados, ya sean radiales o lineales. Mi compromiso se hace referencia en pull request #853.

Un ejemplo "default" gráfico de sectores con un gradiente radial:

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

Un ejemplo gráfico de anillos con un gradiente radial:

$.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} 
      ] 
     } 
     } 
    } 
}); 

Un ejemplo de un gráfico circular inclinado con ar gradiente Adial:

$.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 
    } 
    }); 

Los cambios se basan en una combinación de las sugerencias anteriores propuestas por @Hoffman y a patch sugiere en Flot issue #355 por Luc Boudreau.

Answer 2

La biblioteca no es compatible con eso, actualmente. Si te sientes cómodo fusionando parches, se envió uno junto con issue 355 (sigue el enlace al problema original de Google Code para obtener el archivo adjunto) que agrega gradientes a pies. Aunque no lo he probado todavía.

Answer 3

Ok, entonces lo hice yo mismo. Me tomó un tiempo entender cómo funciona el flot interno, pero finalmente encontré la parte donde necesitaba cambiar. En jquery.flot.pie.js cambiar la función drawSlice (línea 406 en Flot 0.7) a:

  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'; 
       } 

no retire el resto del código después de que el caso.

Y como magia ahora puede definir su serie con gradiente de colores radiales:

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

voy a tratar de hacer una gráfica fresca entonces yo captura de pantalla y publicar aquí.

EDIT: Aquí van:

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

es mucho mejor que usar colores sólidos, pero puede ser mucho mejor, sólo soy malo en los colores de picking. Ahora encontré un pequeño problema, las leyendas no funcionan con mis cambios, no se mostrará ningún color en ellas. No estoy dispuesto a arreglar eso ya que esa funcionalidad está presente en el archivo Flot principal (que es mucho más grande y complejo que el plugin de pie) y no tengo mucho tiempo libre para meterme con eso.