参数说明 - wxCharts使用文档
xiaolin3303 opened this issue · 143 comments
参数说明
opts Object
opts.canvasId String required 微信小程序canvas-id
opts.width Number required canvas宽度，单位为px
opts.height Number required canvas高度，单位为px
opts.background String canvas背景颜色（如果页面背景颜色不是白色请设置为页面的背景颜色，默认#ffffff）
opts.enableScroll Boolean 是否开启图表可拖拽滚动 默认false 支持line, area图表类型(需配合绑定scrollStart, scroll, scrollEnd方法)
opts.title Object (only for ring chart)
opts.title.name String 标题内容
opts.title.fontSize Number 标题字体大小（可选，单位为px）
opts.title.color String 标题颜色（可选）
opts.title.offsetX Number 标题横向位置偏移量，单位px，默认0
opts.subtitle Object (only for ring chart)
opts.subtitle.name String 副标题内容
opts.subtitle.offsetX Number 副标题横向位置偏移量，单位px，默认0
opts.subtitle.fontSize Number 副标题字体大小（可选，单位为px）
opts.subtitle.color String 副标题颜色（可选）
opts.animation Boolean default true 是否动画展示
opts.legend Boolen default true 是否显示图表下方各类别的标识
opts.type String required 图表类型，可选值为pie, line, column, area, ring, radar
opts.categories Array required (饼图、圆环图不需要) 数据类别分类
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.dataPointShape Boolean default true 是否在图表中显示数据点图形标识
opts.disablePieStroke Boolean default false 不绘制饼图（圆环图）各区块的白色分割线
opts.xAxis Object X轴配置
opts.xAxis.gridColor String 例如#7cb5ec default #cccccc X轴网格颜色
opts.xAxis.fontColor String 例如#7cb5ec default #666666 X轴数据点颜色
opts.xAxis.disableGrid Boolean default false 不绘制X轴网格
opts.xAxis.type String 可选值calibration(刻度) 默认为包含样式
opts.yAxis Object Y轴配置
opts.yAxis.format Function 自定义Y轴文案显示
opts.yAxis.min Number Y轴起始值
opts.yAxis.max Number Y轴终止值
opts.yAxis.title String Y轴title
opts.yAxis.gridColor String 例如#7cb5ec default #cccccc Y轴网格颜色
opts.yAxis.fontColor String 例如#7cb5ec default #666666 Y轴数据点颜色
opts.yAxis.titleFontColor String 例如#7cb5ec default #333333 Y轴title颜色
opts.yAxis.disabled Boolean default false 不绘制Y轴
opts.extra Object 其他非通用配置项
opts.extra.ringWidth Number ringChart圆环宽度，单位为px
opts.extra.lineStyle String (仅对line, area图表有效) 可选值：curve曲线，straight直线 (default)
opts.extra.column Object 柱状图相关配置
opts.extra.column.width Number 柱状图每项的图形宽度，单位为px
opts.extra.legendTextColor String 例如#7cb5ec default #cccccc legend文案颜色
opts.extra.radar Object 雷达图相关配置
opts.extra.radar.max Number, 默认为series data的最大值，数据区间最大值，用于调整数据显示的比例
opts.extra.radar.labelColor String, 默认为#666666, 各项标识文案的颜色
opts.extra.radar.gridColor String, 默认为#cccccc, 雷达图网格颜色
opts.extra.pie Object 饼图、圆环图相关配置
opts.extra.pie.offsetAngle Number, 默认为0, 起始角度偏移度数，顺时针方向，起点为3点钟位置（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）
opts.series Array required 数据列表
数据列表每项结构定义
dataItem Object
dataItem.data Array required (饼图、圆环图为Number) 数据，如果传入null图表该处出现断点
dataItem.color String 例如#7cb5ec 不传入则使用系统默认配色方案
dataItem.name String 数据名称
dateItem.format Function 自定义显示数据内容
当数据量大的时候，线图的x轴就相当密集，是否可以像echarts/highCharts那样设置横轴的数据显示比例呢，让x轴不那么密集？
@xiaolin3303 自动抽稀的条件是？
@Galen-Yip X轴显示文案不发生碰撞
可以修改折线图转点处的颜色吗?比如:我在2016.6月有一个数据为空,按照目前的是不画折线图,但是,我的需求是,当数据为空时,我让折线处的颜色变成红色,而数值变成前后数值的算术平均数.请问这个可以实现吗?
那个柱状图的 柱子怎么弄成圆角柱子
请问柱状图怎么去掉x轴显示的文案
请问 柱形图之间的间距怎么修改
@wfq1095745112 暂时不支持圆角
@nanchaodong
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.extra.column.width Number 柱状图每项的图形宽度，单位为px
这些文档里面都有写
@xiaolin3303 请问，饼图的图例可以放到顶部或者左边或者右边吗？
@nanchaodong
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.extra.column.width Number 柱状图每项的图形宽度，单位为px
这些文档里面都有写
我问的是柱子与柱子之间的距离 不是改柱子的宽度 我发现调完柱子的宽度 并没有改变距离
微信小程序布局中有雷达环形柱状图 这些图标的位置都不固定 页面上乱排布 为什么？
请问区域图中，我想将每个数据拐点那里的菱形，换成圆形，有字段选项设置吗
X 轴目前还不支持指定 fontsize 和是否倾斜显示是吧？
ring chart中颜色怎么设置呢
series: [{
name: "已完成",
color:"#ffba00",
data: 2,
}, {
name:"未完成",
data: item.totalSignInTimes - 2,
}],
ring chart怎么使得圆环的起点是正上方，而不是右边呢
extra:{
pie:{
offsetAngle:-90
}
},
这个和swiper组件一起使用的时候, 绘画出的canvas图像 不随屏幕滑动一起移动,就感觉像是被固定定位了, 请问你们有遇到这个问题吗? (在微信开发者工具里 是正常的 但是手机上就会出现这个问题, 安卓,IOS 都有这个问题.)
加入了等分的白色分割线
配置：
drawWhiteLine:true,
whiteLineCount:10
链接：https://github.com/MobileGo2015/wx-charts
完整代码：
var drawProgress =function(that){
for(var index=0;index<that.data.list.length;index++){
var item = that.data.list[index];
var signInTimes = item.hasSignInTimes;
var unSignInTimes = item.totalSignInTimes - item.hasSignInTimes;
var signInColor = "#ffba00";
var unSignInColor ="#f4f4f4";
if (unSignInTimes < 0){
signInColor ="#ff7e00";
unSignInColor ="#ffba00";
}
new wxCharts({
canvasId: "wxChartCanvas_"+item.timeStamp+"_"+item.activityId,
type: 'ring',
series: [{
name: "已完成",
data: signInTimes,
color: signInColor
}, {
name:"未完成",
data: unSignInTimes,
color: unSignInColor
}],
extra:{
pie:{
offsetAngle:-90
},
ringWidth:12
},
title: {
name: (100 * signInTimes / item.totalSignInTimes).toFixed(1)+'%',
color:'#999999',
fontSize:15
},
width: 136,
height: 136,
dataLabel: false,
legend:false,
disablePieStroke:true,
drawWhiteLine:true,
whiteLineCount:10
});
};
}
这个和swiper组件一起使用的时候, 绘画出的canvas图像 不随屏幕滑动一起移动,就感觉像是被固定定位了, 请问你们有遇到这个问题吗? (在微信开发者工具里 是正常的 但是手机上就会出现这个问题, 安卓,IOS 都有这个问题.),，我也遇到这个问题
line类型中，请问怎么样不显示x轴的数据, 然后怎么改变数据点的的形状，请大神解答！！！
x轴 字体怎么能水平显示, 现在是倾斜显示的
@yang-xd x轴文案如果会发生碰撞就会自动倾斜显示
在Y轴设置最大最小值，不管用，数据中也没有超过y轴最大值的数据。例如，y轴上要显示1-12月份
为什么这个hans函数返回的值不是很正确？如何正确的设置？
@1294694985 y轴目前固定是5个刻度，min, max只是制定Y轴的数据范围
怎么实现多柱状图的情况 每个柱的颜色怎么调呢
分割线的颜色怎么调呢
在柱状图中，能不能把每个柱根据数据大小设置不同颜色？
雷达图默认是三圈，怎么设置圈数呀，项目要求有5圈
@lwoshishenya 在wxcharts.js中config中有一个参数radarGridCount:3,改成5就可以
请问如何让刻度文字居中
饼图下方的类别图例太多，右边文字超出屏幕，看不到了。这个有什么参数可以设置吗？
请问纵坐标的刻度 可否加一个自定义刻度
话说，这个文档是不是没写全啊？总感觉demo图表里的参数，不止上面文档里描述的。
项目有很多数据，想请问下怎么实现柱状图横向排列呢？
请问ring的坐标怎么改啊
请问怎么让文字变斜显示，或则竖直显示？谢谢
@DaDongCode 字体倾斜可以使用样式font-style:italic或者是font-style:oblique设置。竖直显示可以将标签宽度设置小些
@houwh001 是在canvas上面画出来的文字，就像这个插件的Line和Scrollline的横轴文字那样变斜,使用ctx.fillText()
您好，请问一下Scrollline中的统计图可以滑动的方法是什么? @xiaolin3303
没找到tonyiweb 的扩展版本。急用将就先搞了一个。
文件发不上来，源代码：
//eric:2018-1-1 扩展Pie图支持drawWhiteLine 画10个间隔白灰等块
function getPieDataPoints(series, process, opts) {
var process = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var count = 0;
var _start_ = opts.drawWhiteLine == true ? 2 * 0.1 * 0.10 * Math.PI : 0;
series.forEach(function (item) {
item.data = item.data === null ? 0 : item.data;
count += item.data;
});
series.forEach(function (item) {
item.data = item.data === null ? 0 : item.data;
item._proportion_ = item.data / count * process;
});
series.forEach(function (item) {
item._start_ = _start_;
_start_ += 2 * item._proportion_ * Math.PI;
});
return series;
}
//eric:2018-1-1 扩展drawWhiteLine属性，画出渐格圈-------------
var xx1=[];
var xx2 = [];
if (opts.drawWhiteLine==true)
{
series.pop(); //默认移除最后一个serie，最后一个为未完成item
var start = -90 - 2 * 0.1 * 0.15 * Math.PI;
for (var i = 0, len = 10; i < len; i++) {
var yy = {};
yy.color = "#dbdbdb";
yy.start = start;
yy.proportion = 0.1*0.85;
start += 2 * yy.proportion * Math.PI;
series.unshift(yy);
var zz = {};
zz.color = "white";
zz._start_ = _start_;
zz._proportion_ = 0.1*0.15;
_start_ += 2 * zz._proportion_ * Math.PI;
series.push(zz);
}
}
//-------------
series.forEach(function (eachSeries) {
context.beginPath();
context.setLineWidth(2);
context.setStrokeStyle('#ffffff');
context.setFillStyle(eachSeries.color);
提供个思路参考。。。
请问areaChart中如何加竖线，绘制成网格形状？在线等！
opts.legend 设置为true 不管用。
legend 点击事件 是哪个？
canvas 宽高没问题 但是里面的圆环非常小是为什么？不应该适应canvas大小吗?
我也遇到这个问题了，楼上后来怎么解决的呢！
如何横屏显示折线图？
雷达图如何显示数值？？？
能否给radar图增加一个中间覆盖层的颜色属性？
opt.componentInstance: this ( component instanse itself )
componentInstance for wx.createCanvasContext(canvasId, componentInstance) is requied in component.
https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/create-canvas-context.html
哪位大神告知一下 在可以滑动的情况下如何更改X轴刻度和Y轴刻度？还有图表中的数据的字体颜色，怎么把图表数据拐点的方块改为圆形。感谢！
建个群？
请问大神，我用了这个wx-chart然后在同一个页面上用了侧边栏，但是侧边栏不管怎么设置z-index,不管怎么设置背景颜色和透明度，这个侧边栏一在手机端显示一直是透明的，电脑端却没事，是不是wx-chart对这个侧边栏有影响，在别的页面我也用侧边栏了，同样的写法没有出现这样透明的bug,不知道用了wx-chart出现了侧边是透明的，而且是手机端，电脑却没事。求指导
如何让饼图的数据值 不光只显示百分百 显示百分比的同时显示值是多少？ @xiaolin3303 求救命啊
如何让饼图的数据值 不光只显示百分百 显示百分比的同时显示值是多少？ @xiaolin3303 求救命啊
如何让饼图的数据值 不光只显示百分百 显示百分比的同时显示值是多少？ @xiaolin3303 求救命啊 @xiaolin3303
怎么让饼图居中显示？默认不是居中显示的
@DeveloperOfAweng format自定义显示的值
@xiaolin3303 有没有办法设置饼图的最小宽度或者label的宽度，当我的label太长，饼就被挤成一个小圆圈，很有喜感。。。 如图
现在只有水平的五条x轴线，如何加上垂直的y轴线呢
@xiaolin3303 如何修改柱状图内容值的颜色？
这个折线图中 series 属性里面有 connectNulls:true（这是echart的属性） 这个属性吗？怎么解决呀
柱状图的图形在X轴下方会出现一点
那个圆柱形怎么才能再嵌套一层
y轴的白色那一块怎么改变
请问一下这个图表不随屏幕尺寸自适应吗
哪位大神能给个答案，ScrollLine的默认展示数据如何设置成最右边
怎么把y轴categories数据显示在右边？
如何一开始展示最右侧数据，在线等
你好，我在使用的时候把数据缓存进了起来，但是再次取缓存绘制图标的时候会出现图表不显示，请问是什么原因呢？
雷达图部分怎么去掉面积只显示线条
能画双y轴吗
请问如何让pie上面的百分比显示的数字，变成series.name。
绘制曲线图的时候，数据差异过大，曲线会穿过x轴（比如y轴数据500 ，50， 0， 0， 0）
绘制环形图怎么设置圆心位置呢,没找到相关设置
@nanchaodong
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.extra.column.width Number 柱状图每项的图形宽度，单位为px
这些文档里面都有写
我问的是柱子与柱子之间的距离 不是改柱子的宽度 我发现调完柱子的宽度 并没有改变距离
请问解决了吗? 柱状图之间的间距?
饼图部分的dataLabel能单独控制吗？比如我想一开始全部都不显示，将dataLabel设为false。用户点击某块时才显示对应的dataLabel，该如何实现
请问如何让pie上面的百分比显示的数字，变成series.name。
可以传format函数
series: [
{
data: value,
name: '月薪',
color: '#ff7f02',
format: (rate) => {
return '月薪：' + value;
},
},
]
条形图换底色会发现多出一条白色的线怎么解决？？？
请问可不可以将柱状图横向展示？这样就可以解决x轴太过密集的问题
请问可不可以将柱状图横向展示？这样就可以解决x轴太过密集的问题
应该是不可以的，但数据太多可以通过增加滑动来处理
pie的label能不能显示成具体的数值而不是百分比？
搞定了，改了下format:
name: skey, data: vals.data[skey], format: function(){ return this.name + ":" + this.data; }
y轴的白色那一块怎么改变
你好 那个toolTip怎么显示出来的呢，我的显示不出来 求教
请问我的断点怎么设置可以连上
哪位大神能给个答案，ScrollLine的默认展示数据如何设置成最右边
同问同问
柱状图可以支持指定每个柱子的颜色吗？
请问横轴如何全部显示 ，即1号，2号，3号，4号，5号
雷达图的radarGridCount 如何配置？
这个线怎么修改大小呢
component自定义组件不能使用，有没有和我一样的
小程序采用分包加载的模式加载数据，我做了个圆环图，放主包里可以正常显示，但放分包里面就不显示了，有人有遇到同样的问题吗？求回答。代码我贴思否社区里了https://segmentfault.com/q/1010000018893723
哪位大神能给个答案，ScrollLine的默认展示数据如何设置成最右边
同问 @xiaolin3303
哪位大神能给个答案，ScrollLine的默认展示数据如何设置成最右边
同问 @xiaolin3303
我也想知道 怎么把legend显示在右侧 而不是下方
请问折线图+柱形图能混用吗，能定义双y轴吗？
