Vary Color Bar For Two Series Data in Jqplot

问题

I want to know how to make vary color bar for two series in Jqplot. If I have only one series data, it works perfectly like the image below

The red and green color based on its value.

But if I have two series data, I can't configure to have two series color for each series data. So far, I can only make this graph

I want the two series graph can have vary color based on its value as well as the one series graph.

This is my 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}
    });

I have tried seriesColors : [seriesColors1, seriesColors2] but it didn't work.

回答1:

Basically you need to create a series array, that contains a dictionary per entry, with a seriesColors entry. A working example is shown in the following 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 }
});

(The fiddle may stop working if I the external js files are changed; jsfiddle doesn't have jqplot libraries by default.)

回答2:

I came across this today and as dr jimbob had predicted, all the external files had succumbed to link rot. I found a CDN site and updated the fiddle to the latest jQuery & JQPlot resource files, available here: http://jsfiddle.net/delliottg/WLbGt/96/

Just to satisfy the JSFiddle cop on SO that won't let me post this w/o it:

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

I had nothing to do with the fiddle itself, I just updated it so it worked. Hope this helps someone (turns out it wasn't what I was looking for, but ya pays yer money & ya takes your chances).

来源：https://stackoverflow.com/questions/4409119/vary-color-bar-for-two-series-data-in-jqplot

标签

javascript

jquery

jqplot