jquery图表范例及推荐highchart+sparkline

HIGHCHARTS 

官网：http://www.highcharts.com/

code：具体操作网管API中都有。

/**

  * 画一个柱状图

  * @param valueList 图表的值 (数组)

  * @param dateList 日期值 (数组)

  * @param renderTo 要显示位置的id

  * @param controlValue 管控值 (数组)

  * @colorA 最后一条数据显示的颜色

  */

 function newChartColumn(valueList,dateList,renderTo,controlValue,colorA){

  var  chartOption ={

   chart: {

       renderTo: renderTo,

       type: 'column',

       height: h,

       borderWidth:0,

       width:w

   },

   credits:{     

    enabled:false

   },

   legend: {     

      enabled: false

     },

   title: {

    text:null

   },

   tooltip: {

              formatter: function() {

                 return this.x + '<br>值:'+ this.y +'';

             },

             style: {

                 padding: '10px',

                 fontWeight: 'bold',

                 fontSize:'12px'

             }

         },

   xAxis: {

    categories:dateList,

    minPadding: 0.05,

    maxPadding: 0.05,

    labels: {

                 style: {

                     fontSize:'9px'

                 }

             }

   },

   yAxis:{

    title: {

        text: null

    },

    labels: {

     align: 'left',

                 style: {

                     fontSize:'9px'

                 }

             }

   }

  };

  

  var controlList = new Array();

  if(controlValue!=null && controlValue.length>0){

   

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

    if(controlValue[i]!=null && !isNaN(controlValue[i]) && controlValue[i]!=""){

     controlList.push(parseInt(controlValue[i]));

    }else{

     //controlList.push(0); //0能成功成功

     controlList.push(null);

    }

   }

   

   

   var realData = new Array();

   var innerData;

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

    if(i!=valueList.length-1){

     innerData = {y:valueList[i],color:'#4572A7'};

    }else{

     innerData = {y:valueList[i],color:colorA=='' ? '#4572A7' : colorA};

    }

    realData.push(innerData);

   }

   chartOption.series = [{

    data:realData},

      {name: "管控线",

     data:controlList,

     type:'line',

     color:'#80699B'}

   ];

  }else{

   chartOption.series = [{

    name:'值',

    data:valueList

   }]

      

  }

  new Highcharts.Chart(chartOption);

 }

 

//画一个柱状图

function newChartColumn(valueList,dateList,renderTo,unit,interval,controlList){

 

 if(interval=='undefined') interval=1;

 var chart1 = new Highcharts.Chart({

  chart: {

      renderTo: renderTo,

      type: 'column',

      borderWidth:0

  },

  credits:{     //右边下标HighCharts.com去除

   enabled:false

  },

  legend: {     //正下方数据线名称，点击可以显示和删除

     enabled: false

    },

  title: {

   text:unit,

   style:{

    fontSize:'24px',

    color:'#4572A7'

   }

  },

  plotOptions: {

            series: {

                marker: {

                    enabled: false,

                    states: {

                        hover: {

                            enabled: true

                        }

                    }

                }

            }

        },

  tooltip: {

            formatter: function() {

             return this.x + '<br>值:'+ this.y +'';

           },

           style: {

               padding: '10px',

               fontWeight: 'bold',

               fontSize:'12px'

           }

  },

  xAxis: {

   categories:dateList,

   minPadding: 0.05,

   maxPadding: 0.05,

   labels: {

     staggerLines: 2,

                style: {

                    fontSize:'10px'

                }

            },

            tickInterval:interval

  },

  yAxis:{

   title: {

       text: null

   },

   labels: {

                style: {

                    fontSize:'10px'

                }

            }

  },

  series: [

   {

    name: "值",

      data: valueList

     },{

      name:'管控线',

      data:controlList,

      type:'line',

      color:'#80699B'

     }]

 });

}

//画一个饼状图

function newChartPie(valueList,renderTo){

 var chart = new Highcharts.Chart({

  chart: {

   renderTo: renderTo,

   plotBackgroundColor: null,

   plotBorderWidth: null,

   plotShadow: false,

         borderWidth:0

  },

  title: {

   text: ''

  },

  credits: {

   enabled:false

  },

  legend:{

   layout:'vertical',

   align:'right',

   floating: true

  },

  tooltip: {

            formatter: function() {

              return "<b>"+this.point.name + '<b/>：'+ this.y +' 列';

           },

           style: {

               padding: '10px',

               //fontWeight: 'bold',

               fontSize:'14px'

           }

  },

  plotOptions: {

   pie: {

    size:'100%',

    allowPointSelect: true,

    cursor: 'pointer',

    dataLabels: {

     enabled: true,   

     color: 'black',   

     connectorColor: '#333',

     distance: -20,

     style: {  

                        fontSize:'16px'

                    },

     formatter: function() {

      return this.point.name+'：'+this.percentage.toFixed(2)+'%'; //this.percentage 百分比

     }

    },

    showInLegend:true

    

   }

  },

  series: [{

   type: 'pie',

   name: '值',

   data: [

    { name :"4节编组",

     y : valueList[0],

     color : '#79BB25'

    },

    { name :"6节编组",

     y : valueList[1],

     color : '#FFC002'

    },

    { name :"7节编组",

     y : valueList[2],

     color : '#4572A7'

    },

    { name :"8节编组",

     y : valueList[3],

     color : '#FE5917'

    }

   ]

  }]

 });

}

//画一个折线图

function newChartLine(valueList,dateList,renderTo,interval,controlList){

 if(interval=='undefined') interval=1;

 var chart1 = new Highcharts.Chart({

  chart: {

      renderTo: renderTo,

      type: 'line',

      borderWidth:0

  },

  credits:{     //右边下标HighCharts.com去除

   enabled:false

  },

  legend: {     //正下方数据线名称，点击可以显示和删除

     enabled: false

    },

  title: {

   text:null

  },

  tooltip: {

            formatter: function() {

               return this.x + '<br>'+this.series.name+":"+ this.y +'';

           },

           style: {

               padding: '10px',

               fontWeight: 'bold',

               fontSize:'12px'

           }

  },

  plotOptions:{

   dataLables:{

    enabled:true

   },

   series: {

                marker: {

                    enabled: false,

                    states: {

                        hover: {

                            enabled: true

                        }

                    }

                }

            }

  },

  xAxis: {

   categories:dateList,

   minPadding: 0.05,

   maxPadding: 0.05,

   tickInterval:interval

  },

  yAxis:{

   title: {

       text: null

   }

  },

  series: [{

   name:"值",

     data: valueList

  },{

     name:'管控线',

     data:controlList,

     type:'line',

     color:'#80699B'

    }]

 });

}

sample：







jquery sparkline  小型图表

官网 http://omnipotent.net/jquery.sparkline/#s-about

code：

function newSparkBar(index,dateList,valueList,controlValue,title,measure){

 var data = '';

 var maxData = arrMax(valueList);

 var minData = arrMin(valueList);

 var cmaxData = arrMax(controlValue);

 var cminData = arrMin(controlValue);

 //controlValue = ((maxData+minData)/2).toFixed(4);

 if(controlValue!=null&&controlValue.length>0){

  if(cmaxData>maxData){

   maxData = cmaxData;

  }

  if(cminData<minData&&cminData!=0){

   minData = cminData;

  }

 }

 

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

  data += valueList[i];

  data += ",";

  }

 data = data.substr(0,data.length-1);

 $(index).html(data);

 $(index).sparkline('html',

   {type:'bar',

    barColor:'#0072E3',

    width:150,

    height:40,

    barWidth:7,

    barSpacing:3,

    tooltipChartTitle:'<span style="display:inline;">   </span>'+title,

    tooltipSuffix:measure,

    tooltipFormat: '  <span style="display:inline;color: {{color}}">●</span> 实际值： {{prefix}}{{value}}{{suffix}}',

    chartRangeMin:0,

    chartRangeMax:maxData

   });

 

 if(controlValue!=''&&controlValue.length>0&&cmaxData!=0&&cminData!=0){

  var control = controlValue;

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

  // control[i] = controlValue;

  //}

  

  $(index).sparkline(control,

    {type:'line',

     spotRadius:2,

     lineWidth:2,

     width:150,height:40,

     tooltipSuffix:measure,

     composite: true,

     tooltipFormat: '<span style="display:inline;color: {{color}}">●</span> 管控值： {{prefix}}{{y}}{{suffix}}',

     fillColor: false,

     lineColor: '#FFA042',

     highlightLineColor:'red',

     chartRangeMin:0,

     chartRangeMax:maxData

    });   

 }

}

sample：