开发者

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

Vary Color Bar For Two Series Data in Jqplot

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

Vary Color Bar For Two Series Data in Jqplot

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
            //}
        },开发者_StackOverflow
        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.


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


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜