参数说明 - wxCharts使用文档

[xiaolin3303]

参数说明

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 自定义显示数据内容

[javarcn]

当数据量大的时候，线图的x轴就相当密集，是否可以像echarts/highCharts那样设置横轴的数据显示比例呢，让x轴不那么密集？

[xiaolin3303]

@javarcn 对于X轴很密集的情况工具会自动进行抽稀处理，如果还不能满足你的需求，关注下这个issue51

[Galen-Yip]

@xiaolin3303 自动抽稀的条件是？

[xiaolin3303]

@Galen-Yip X轴显示文案不发生碰撞

[wangsz111]

可以修改折线图转点处的颜色吗?比如:我在2016.6月有一个数据为空,按照目前的是不画折线图,但是,我的需求是,当数据为空时,我让折线处的颜色变成红色,而数值变成前后数值的算术平均数.请问这个可以实现吗?

[wfq1095745112]

那个柱状图的 柱子怎么弄成圆角柱子

[nanchaodong]

请问柱状图怎么去掉x轴显示的文案

[nanchaodong]

请问 柱形图之间的间距怎么修改

[xiaolin3303]

@wfq1095745112 暂时不支持圆角

[xiaolin3303]

@nanchaodong
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.extra.column.width Number 柱状图每项的图形宽度，单位为px
这些文档里面都有写

[wj3284]

@xiaolin3303 请问，饼图的图例可以放到顶部或者左边或者右边吗？

[nanchaodong]

@nanchaodong
opts.dataLabel Boolean default true 是否在图表中显示数据内容值
opts.extra.column.width Number 柱状图每项的图形宽度，单位为px
这些文档里面都有写
我问的是柱子与柱子之间的距离 不是改柱子的宽度 我发现调完柱子的宽度 并没有改变距离

[nanchaodong]

微信小程序布局中有雷达环形柱状图 这些图标的位置都不固定 页面上乱排布 为什么？

[xiaolin3303]

@nanchaodong

微信小程序布局中有雷达环形柱状图 这些图标的位置都不固定 页面上乱排布 为什么？

这个问题请单独开一个issue，并附上更多的信息（截图，关键代码等）

[zfchengjun]

请问区域图中，我想将每个数据拐点那里的菱形，换成圆形，有字段选项设置吗

[JohnnyZhao]

X 轴目前还不支持指定 fontsize 和是否倾斜显示是吧？

[tonyiweb]

ring chart中颜色怎么设置呢

series: [{
name: "已完成",
color:"#ffba00",
data: 2,
}, {
name:"未完成",
data: item.totalSignInTimes - 2,
}],

[tonyiweb]

ring chart怎么使得圆环的起点是正上方，而不是右边呢
extra:{
pie:{
offsetAngle:-90
}
},

[txw8]

这个和swiper组件一起使用的时候, 绘画出的canvas图像 不随屏幕滑动一起移动,就感觉像是被固定定位了, 请问你们有遇到这个问题吗? (在微信开发者工具里 是正常的 但是手机上就会出现这个问题, 安卓,IOS 都有这个问题.)

[tonyiweb]

加入了等分的白色分割线
配置：
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
});
};
}

[liuyon7]

这个和swiper组件一起使用的时候, 绘画出的canvas图像 不随屏幕滑动一起移动,就感觉像是被固定定位了, 请问你们有遇到这个问题吗? (在微信开发者工具里 是正常的 但是手机上就会出现这个问题, 安卓,IOS 都有这个问题.),，我也遇到这个问题

[boreyic]

@liuyon7 我也遇到跟你一样的问题了，兄弟解决了吗？

[xiaolin3303]

@liuyon7 参考#141

[xiaolin3303]

@boreyic 参考 #141

[cnvp]

line类型中，请问怎么样不显示x轴的数据, 然后怎么改变数据点的的形状，请大神解答！！！

[yang-xd]

x轴 字体怎么能水平显示, 现在是倾斜显示的

[liuyon7]

@boreyic 我改用定时器，自己刷新数据了

[yindong999]

图例可以点击吗；点击隐藏对应的折线，再次点击显示对应的折线，，，

[fafala]

x轴数据为什么总是等分显示？比如我传入的x轴数组为[1,5,7,14,15,17],x轴没有办法设置最大值和最小值来对应显示数组的值

[tsmliyun]

x轴的数据不见了一部分，这是因为x周数据太多了吗?，我x轴有45个数据，15个的就能正常显示，还有我发现一个规律就是，每隔两个就显示出一个数据

试试注释以下部门代码：

    // categories = categories.map(function (item, index) {
    //     Console.LOG();
    //     return index % ratio !== 0 ? '' : item;
    // });

[leiminghai]

这个和swiper组件一起使用的时候, 绘画出的canvas图像 不随屏幕滑动一起移动,就感觉像是被固定定位了, 请问你们有遇到这个问题吗? (在微信开发者工具里 是正常的 但是手机上就会出现这个问题, 安卓,IOS 都有这个问题.)

解决了么

[TianJing555]

请问怎么设置图表内容位于canvas垂直居中

[SystemLight]

源码中改变这个参数可以改变稀松程度，调节横轴紧凑或者稀松。
var eachSpacing = spacingValid / dataCount;

源码中改变这个参数可以改变间隔显示，设置成1就不会缺少数据或者数据间隔显示。
var ratio = Math.ceil(categories.length / maxXAxisListLength);

希望把这两个功能可以通过外部配置来直接设置，提供相应的配置参数。

[weitaoYan6515]

柱状图可以左右滑动吗

[NiuYunfei]

请问各位道友，可以在钉钉里使用吗

[a18820634796]

ring chart怎么使得圆环的起点是正上方，而不是右边呢
extra:{ pie:{ offsetAngle:-90 } },

[echo-ho]

那个柱状图的 柱子怎么弄成圆角柱子

同问，柱状图颜色如何改变？

[55utah]

怎么实现多柱状图的情况 每个柱的颜色怎么调呢

设置柱状图颜色方法：
{ categories: [''], series: [{ data: [10], color: '#fad355' }, { data: [7], color: '#4e83fd' }] }

相当于使用了已有的分组能力， 但是就一个组， 缺点是柱状图间距较小。

[hbigman]

line类型中，请问怎么样不显示x轴的数据, 然后怎么改变数据点的的形状，请大神解答！！！

yAxis: {
gridColor:'#fff',//背景色值
},

[tainx77]

x轴 字体怎么能水平显示, 现在是倾斜显示的

if (maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) {
// result.angle = 45 * Math.PI / 180;
result.angle = 0; //控制x轴倾斜角度
result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle);
}
修改引入的js 542行，强制设为水平

[1170762202]

@xiaolin3303 legend现在只能显示在图表下方，建议加个gravity，四个方位供选择

[lslashub]

opts.xAxis.disableGrid这个配置好像没用哎,不管true还是false都会绘制x轴网格

[wweihua]

你好，邮件已收到，我会尽快查看。

[conque-ljj]

请问可以实现面积堆积图吗

[wweihua]

你好，邮件已收到，我会尽快查看。

[suiyuesu]

x轴的数据不见了一部分，这是因为x周数据太多了吗?，我x轴有45个数据，15个的就能正常显示，还有我发现一个规律就是，每隔两个就显示出一个数据

源码里把 return e%d!=0?"":t 换证return t

[wweihua]

你好，邮件已收到，我会尽快查看。

[li17762146890]

怎么给柱状图的最后一项 单一设置颜色

[wweihua]

你好，邮件已收到，我会尽快查看。

[staticWu]

wx-charts不支持type=“2d”么？

[wweihua]

你好，邮件已收到，我会尽快查看。

[gzzandmmm]

Y轴的轴线不能展示吗？

[pkq111]

我希望能够自行设置x轴的刻度间隔

[wweihua]

你好，邮件已收到，我会尽快查看。

[nightingale1099]

您好，请问一下y轴是只能固定显示6个值吗

[nightingale1099]

您好，请问一下y轴是只能固定显示6个值吗

[wweihua]

你好，邮件已收到，我会尽快查看。