jqchart总结

animation: { duration: 1 },      //动画显示
 
background: undefined  //背景颜色
 
chartAreaBackground: undefined //图表区域背景颜色
 
title: {    //标题
          text:  'content' ,  // 图表标题
          font: '22px sans-serif', // 字体大小
          fillStyle: 'black',  // 字体颜色
          strokeStyle : undefined,  //笔画风格
          margin: 8 // 文字与图表距离
      }
 
border: {   //边框的样式
          strokeStyle: 'black', // 边框颜色
          lineWidth: 1, // 边框线粗细
          cornerRadius: 10, //边角弧度半径
          padding: 4 // 内容距离边框距离
}
 
legend: {     //说明
          title: {}, // 标题
          border: {}, //边框
          font: '12px sans-serif', //字体大小
          textFillStyle: 'black',  // 字体颜色
          textStrokeStyle : undefined,  // 笔画风格
          background: undefined, //背景颜色
          margin: 4, // 内容距离边框距离
          visible : true //是否显示
}
 
tooltips: { //提示数据
          disabled : false, //是否不引用
          type: 'normal', //类型 正常或共享
          background : undefined, //背景颜色
          borderColor: 'auto', // 边框颜色  
}
 
crosshairs: {  //瞄准器
          enabled: false, //是否启用
          snapToDataPoints: true, //定位到数据点上
          hLine: { visible: true, strokeStyle: 'red' }, // 水平行选项
          vLine: { visible: true, strokeStyle: 'red' } // 垂直行选项
}
 
axes: [ //坐标轴
{
         location: 'left',//y轴位置，取值：left,right
         minimum: 0,//y轴刻度最小值
         maximum: 100,//y轴刻度最大值
         interval: 10//刻度间距
}]
 
series: [ //数据
{
type: 'column',//图表类型，取值：column 柱形图，line 线形图，pie 饼图
title:'content',//标题
data:             //数据                
}]
 
column Series Options = { //柱形图数据选项
     fillStyle : undefined, //填充柱子样式
     strokeStyle : undefined, //柱子边框样式
     lineWidth : undefined, // 柱子边框宽度
     pointWidth : undefined, // 柱子粗细 0到1
     markers: { size: 10, type: 'circle', strokeStyle: 'black', lineWidth: 1 } //描点
     labels: {stringFormat: '%d', font: '12px sans-serif' ,fillStyle: 'red'} //标出数据
}
 
var background = {  //背景颜色渐变
  type: 'linearGradient',
  x0: 0,
  y0: 0,
  x1: 0,
  y1: 1,
  colorStops: [{ offset: 0, color: '#d2e6c9' },
               { offset: 1, color: 'white'}]
};
 
var fillStyle = {  //填充样式颜色渐变
  type: 'linearGradient',
  x0: 0,
  y0: 0,
  x1: 1,
  y1: 0,
  colorStops: [{ offset: 0, color: '#65c2e8' },
               { offset: 0.49, color: '#55b3e1' },
               { offset: 0.5, color: '#3ba6dc' },
               { offset: 1, color: '#2794d4'}]
};

 

例子：

 

var data1 = [];

var data2 = [];

data1.push([1,1]);  //填写数据

data2.push([1,3]);  //填写数据

$('#jqChart').jqChart({ // 生成柱状图
                        title : {
                            text : '标题'
                        },
                        axes : [ {

                            title: { text: 'Y轴'},
                            location : 'left',// y轴位置，取值：left,right    
                            minimum : 0,// y轴刻度最小值
                            maximum : 100,// y轴刻度最大
                            interval : 10 // 刻度间距
                        },

                       {title: { text: 'X轴'},
                                location : 'bottom',  
                               interval : 1

                      }],
                        series : [
                                // 数据1开始
                                {
                                    type : 'column',// 图表类型，取值：column柱形图，line 线形图
                                    title : '数据1',// 标题
                                    data : data1
                                // 数据内容，格式[[x轴标题,数值1],[x轴标题,数值2],......]
                                },
                                // 数据1结束
                                // 数据2
                                {
                                    type : 'column',
                                    title : '数据2',
                                    data : data2
                                },
                        // 数据2结束
                        ]
            });