Jqplot中两个系列数据的变色条

我想知道如何在Jqplot中制作两个系列的变色条。 如果我只有一个系列数据,它的工作方式与下图完全相同

替代文字

红色和绿色基于其价值。

但是如果我有两个系列数据,我就无法为每个系列数据配置两个系列颜色。 到目前为止,我只能制作这张图

替代文字

我希望这两个系列图可以根据其值以及一个系列图来改变颜色。

这是我的代码

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

我试过过seriesColors : [seriesColors1, seriesColors2]但它没有用。

基本上,您需要创建一个系列数组,其中包含每个条目的字典,以及一个seriesColors条目。 以下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 } }); 

(如果外部js文件被更改,小提琴可能会停止工作;默认情况下,jsfiddle没有jqplot库。)

今天我遇到了这个,正如jimbob博士预测的那样,所有的外部文件都已经屈服于连接腐烂。 我找到了一个CDN网站并更新了最新的jQuery和JQPlot资源文件,可在此处找到: http : //jsfiddle.net/delliottg/WLbGt/96/

只是为了满足JSFiddle警察的SO,这不会让我发布这个没有它:

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

我与小提琴本身没有任何关系,我只是更新它以便它起作用。 希望这可以帮助某人(事实certificate这不是我想要的,但是你支付了你的钱,而且你需要机会)。