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

dee*_*wan 5 javascript jquery 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}
    });
Run Code Online (Sandbox Code Playgroud)

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

dr *_*bob 9

基本上你需要创建一个系列数组,每个条目包含一个带有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 }
});
Run Code Online (Sandbox Code Playgroud)

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