Jqplot自定义图表颜色

一、需求： 纵轴：系统1，系统2，系统3……

横轴：符合项数占适用项的比例（用进度条表示），定义80%以上满足绿色，50%以上黄色，50%以下红色.二、使用报表工具：jqplot

三、附上代码供大家交流 

 

//组装颜色数组

function GetSeriesColor(){ 

var series='${series}'.split(",");

       colorArr = new Array(series.length); 

       for (i = 0; i < series.length; i++){ 

           if (series[i] < 50){ 

               colorArr[i] = 'red'; 

           } 

           else if(series[i] > 80 ){ 

               colorArr[i] = 'green'; 

           } else{

            colorArr[i] = 'yellow';

           }

       } 

       return colorArr; 

   } 

生成图表：

$(function() {

 

//组装水平柱状图数据

   var sineRenderer = function() {

    var series = '${series}'.split(",");

    var xPointData=series.map(function(series){  

       return +series;  

   }); 

    var yPointData = '${categories}'.split(",");

var data = [[]];

for (var i=0; i<xPointData.length; i++) {

data[0].push([xPointData[i], yPointData[i]]);

}

return data;

};

var colors=GetSeriesColor();

   // 水平柱状图

   var plot = $.jqplot('chart1', [], {

    title: '按系统统计符合情况', 

    seriesColors: colors,

    dataRenderer: sineRenderer,

       seriesDefaults: {

           renderer:$.jqplot.BarRenderer,

           // 显示单个柱状图的数据

           pointLabels: {

    show: true,

    location: 'e',

    edgeTolerance: -15 

    },

           //阴影角度

           shadowAngle: 135,

           // 设置柱状图的各项属性，例如：barDirection: 'horizontal'水平方向

           rendererOptions: {

               barDirection: 'horizontal',

               barWidth:20,

                barMargin: 5

           }

       },

       axes: {

        yaxis: {

               renderer: $.jqplot.CategoryAxisRenderer

           }

       }

   });

  });

以上是项目实现……