2010-12-10 8 views
5

Quiero saber cómo hacer variar la barra de color para dos series en Jqplot. Si sólo tengo una serie de datos, funciona perfectamente como la siguiente imagenVaríe la barra de color para dos datos de serie en Jqplot

alt text

El color rojo y verde sobre la base de su valor.

Pero si tengo dos datos de serie, no puedo configurar para tener dos series de color para cada serie de datos. Hasta el momento, sólo puedo hacer que este gráfico

alt text

quiero que el gráfico de dos series puede tener el color variará en función de su valor, así como el gráfico de una serie.

Este es mi código

chart = $.jqplot('map-chart', [dataChart, dataChart2], { 
     title: 'TIME', 
     legend: { 
      renderer: $.jqplot.EnhancedLegendRenderer, 
         show: true, 
         location: 'ne' 
     }, 
     series: [{label: 'Current data'}, {label: 'Worst data'}], 
     //seriesColors: seriesColors1, 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      pointLabels: {show: true} 
      //rendererOptions:{ 
      //varyBarColor: true 
      //} 
     }, 
     axes: { 
      xaxis: { 
       label: 'station', 
       renderer: $.jqplot.CategoryAxisRenderer, 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
       ticks: tickers, 
       tickOptions: { 
        angle: -30 
       } 
      }, 
      yaxis: { 
       min: 0, 
       label: 'Time', 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       tickOptions: { 
        fontSize: '8pt' 
       } 
      } 
     }, 
     highlighter: {show: false} 
    }); 

He tratado seriesColors : [seriesColors1, seriesColors2] pero no funcionó.

Respuesta

9

Básicamente, necesita crear una matriz en serie, que contiene un diccionario por entrada, con una entrada seriesColors. Un ejemplo de trabajo se muestra en el siguiente jsfiddle:

plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]], 
{ 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions:{ varyBarColor : true } 
     }, 
     series: [ 
      {seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']}, 
      {seriesColors: ["#a30", "#4b0", "#b40", '#af0', '#fa0']} 
      ], 
     highlighter: { show: false } 
}); 

(. El violín puede dejar de funcionar si el js externos archivos se ha cambiado; jsFiddle no tiene bibliotecas jqplot por defecto)

+0

Gracias dr jimbob ... he estado esperando tanto tiempo para ver la respuesta. Realmente funciona. :) –

0

me encontré esto hoy y, como había predicho el Dr. Jimbob, todos los archivos externos habían sucumbido a la podredumbre del enlace. He encontrado un sitio CDN y actualizado el violín a los últimos archivos de recursos & JQPlot jQuery, disponible aquí: http://jsfiddle.net/delliottg/WLbGt/96/

sólo para satisfacer el policía jsFiddle encendido de modo que no me deja publicar esto w/o que:

//this is not my code, it's only here to satisfy the SO require that fiddles have 
// code associated with them 
plot1 = $.jqplot('chart1', [[50,100,50,50,75],[80,70,50,50,40]], { 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions:{ varyBarColor : true } 
     }, 
    series: [ 
      {seriesColors: [ "#f00", "#4b0", "#b40", '#ff0', '#fb0']}, 
      {seriesColors: ["#00f", "#b0b", "#a30", "#4b0", '#af0']} 
      ], 
     highlighter: { show: false } 
}); 

No tuve nada que ver con el violín en sí, simplemente lo actualicé para que funcionara. Espero que esto ayude a alguien (resulta que no era lo que estaba buscando, pero ya pagas tu dinero & ya te arriesgas).

Cuestiones relacionadas