没有合适的资源?快使用搜索试试~ 我知道了~
jquery_render.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 21 浏览量
2023-02-28
20:55:27
上传
评论
收藏 599KB PDF 举报
温馨提示
试读
19页
。
资源推荐
资源详情
资源评论
jqplot 的各个渲染器做个简单介绍。
这里主要是参考 jqPlot 官方网站关于 Option 的介绍并结自己简单实践和
理解来对 Option 的相关属性进行解释,如有不合适或错误的地方请指正。
options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575",
"#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], //默
认显示的分类颜色,
//如果分类的数量超过这里的颜色数量,则从该队列中第一个位置开始
重新取值赋给相应的分类
stackSeries: false, // 如果置为 true 并且有多个分类(如果是折线图,
就必须多于一条折线),
// 那么每个分类(折线)在纵轴上的值为其前所有
分类纵轴值总和与其纵
//轴值相加值(eg,当前分类纵轴值为 Y3
//,其前有 Y2,Y1,那么他显示在 Y 轴上值为 Y2+Y3+Y1,
目前该属性支持线图和柱状图
title: '', //设置当前图的标题
title: {
text: '', // 设置当前图的标题
show: true,//设置当前标题是否显示
},
axisDefaults: {
show: false, // wether or not to renderer the
axis. Determined automatically.
min: null, // 横(纵)坐标显示的最小值
max: null, // 横(纵)坐标显示的最大值
pad: 1.2, // 一个相乘因子,
//(数据在横(纵)轴上最大值-数据在横(纵)轴上最小值)
*pad 值=该轴显示的横(纵)坐标区间长度
// 该轴显示的横(纵)坐标区间长度=横(纵)坐标显示的最
大值-横(纵)坐标显示的最小值
//如果设置了 max 和 min 的值的话,那么会优先考虑 min 和
max 设置的值
ticks: [], //设置横(纵)坐标的刻度上的值,可为该 ticks
数组中的值,
// a 1D [val1, val2, ...], or 2D [[val, label], [val,
label], ...]
numberTicks: undefined, //一个相除因子,用于设置横(纵)坐标
刻度间隔
//横(纵)坐标刻度间隔值=横(纵)坐标
区间长度/(numberTicks-1)
tickInterval:'', //横(纵)坐标刻度间隔值,可为日期字
符串
renderer: $.jqplot.LinearAxisRenderer, // 设置横(纵)轴上数
据加载的渲染器,有 dateAxisRenderer(参见本文最后相关介绍) 。
rendererOptions: {}, // 设置 renderer 的 Option 配置对象,线
状图不需要设置
//不同图表的 Option 配置对象请参见下面《jqPlot 各个
不同插件的 Option 对象设置》
//中各个图表的配置 Option 对象
tickOptions: {
mark: 'outside', // 设置横(纵)坐标刻度在坐标轴上显示
方式,分为坐标轴内,外,穿过坐标轴显示
// 值也分为:'outside', 'inside' 和
'cross',
showMark: true, //设置是否显示刻度
showGridLine: true, // 是否在图表区域显示刻度值方向的网格
线
markSize: 4, // 每个刻度线顶点距刻度线在坐标轴上点
距离(像素为单位)
//如果 mark 值为 'cross', 那么每个刻度
线都有上顶点和下顶点,刻度线与坐标轴
//在刻度线中间交叉,那么这时这个距离
×2,
show: true, // 是否显示刻度线,与刻度线同方向的网
格线,以及坐标轴上的刻度值
showLabel: true, // 是否显示刻度线以及坐标轴上的刻度
值
formatString: '', // 梃置坐标轴上刻度值显示格式,
eg:'%b %#d, %Y'表示格式"月 日,年","AUG 30,2008"
fontSize:'10px', //刻度值的字体大小
fontFamily:'Tahoma', //刻度值上字体
angle:40, //刻度值与坐标轴夹角,角度为坐标轴正向
顺时针方向
fontWeight:'normal', //字体的粗细
fontStretch:1//刻度值在所在方向(坐标轴外)上的伸展(拉伸)
度
}
showTicks: true, /// 是否显示刻度线以及坐标轴上的刻度
值
showTickMarks: true, //设置是否显示刻度
useSeriesColor: true //如果有多个纵(横)坐标轴,通过该属
性设置这些坐标轴是否以不同颜色显示
},
axes: {
xaxis: {
// 设置同 axisDefaults
},
yaxis: {
// 设置同 axisDefaults
},
x2axis: {
// 设置同 axisDefaults
},
y2axis: {
// 设置同 axisDefaults
}
},
seriesDefaults: {//如果有多个分类,这可通过该配置属性设置各个分类
的共性属性
show: true, // 设置是否渲染整个图表区域(即显示图表中内
容)
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // 用于显示在分类名称框中的分类名称
color: '', // 分类在图标中表示(折现,柱状图等)的颜色
lineWidth: 2.5, // 分类图(特别是折线图)哪宽度
shadow: true, // 各图在图表中是否显示阴影区域
shadowAngle: 45, // 参考 grid 中相同参数
shadowOffset: 1.25, // 参考 grid 中相同参数
shadowDepth: 3, // 参考 grid 中相同参数
shadowAlpha: 0.1, // 参考 grid 中相同参数
showLine: true, //是否显示图表中的折线(折线图中的折线)
showMarker: true, // 是否强调显示图中的数据节点
fill: false, // 是否填充图表中折线下面的区域(填充颜色
同折线颜色)以及 legend
//设置的分类名称框中分类的颜色,此处注意的
是如果 fill 为 true,
//那么 showLine 必须为 true,否则不会显示效
果
fillAndStroke: false, //在 fill 为 true 的状态下,在填充区
域最上面显示一条线(如果是折线图则显示该折线)
fillColor: undefined, // 设置填充区域的颜色
fillAlpha: undefined, // 梃置填充区域的透明度
renderer: $.jqplot.PieRenderer, // 利用渲染器(这里是利用饼图
PieRenderer)渲染现有图表
剩余18页未读,继续阅读
资源评论
不吃鸳鸯锅
- 粉丝: 8354
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 瑞萨RL78系列MCU设备文件
- Java电子商务平台案例介绍:实现商品展示、购物车、订单管理和支付功能
- yolov8初始化权重文件
- Nacos控制台简介.pdf
- 基于STM32与ESP8266的智能家居系统,以STM32为核心控制单元,通过传感器监测室内环境,结合微信小程序实现数据传输与远
- ChineseCalendar-1.0.5-SNAPSHOT.jar
- 基于Bagging集成学习方法的情绪分类预测模型研究(数据集+代码).rar
- nacos-server-2.3.0-BETA.zip
- 双11活动数据分析-商品销售数据、促销活动的信息、用户行为数据
- 基于记忆与模型协同过滤的电影推荐系统研究与实践(数据集+代码).rar
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功