Variabler Farbbalken für zwei Serien Daten in Jqplot

Question

Ich möchte wissen, wie man Farbbalken für zwei Serien in Jqplot variiert. Wenn ich nur eine Serie Daten haben, es funktioniert perfekt wie das Bild unten

Die rote und grüne Farbe basiert auf seinen Wert.

Aber wenn ich zwei Serien Daten habe, kann ich nicht konfigurieren, zwei Reihen Farbe für jede Serie Daten zu haben. Bisher kann ich nur diese Grafik mache

Ich mag die beiden Serien Graph habe Farbe variieren, basierend auf seinem Wert sowie eine Serie Graphen.

Dies ist mein Code

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

ich seriesColors : [seriesColors1, seriesColors2] versucht, aber es hat nicht funktioniert.

Answer 1

Grundsätzlich müssen Sie ein Reihen-Array erstellen, das ein Wörterbuch pro Eintrag mit einem seriesColors Eintrag enthält. Ein Arbeitsbeispiel wird in den folgenden jsfiddle gezeigt:

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

(. Die Geige kann aufhören zu arbeiten, wenn ich die externe js Dateien geändert werden; jsfiddle nicht jqplot Bibliotheken standardmäßig zugeordnet sind)

Answer 2

Ich kam in heute und wie dr jimbob vorhergesagt hatte, waren alle externen dateien der link-verrottung erlegen. Ich fand eine CDN-Website und die Geige der neuesten jQuery & JQPlot Ressourcendateien aktualisiert, finden Sie hier: http://jsfiddle.net/delliottg/WLbGt/96/

einfach den JSFiddle Polizisten auf SO zu erfüllen, die mich nicht so lasse Post w/o es:

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

Ich hatte nichts mit der Geige selbst zu tun, ich habe es gerade aktualisiert, also hat es funktioniert. Hoffe, das hilft jemandem (stellt sich heraus, dass es nicht das war, was ich suchte, aber ya zahlt dein Geld & ya nimmt deine Chancen).