uniapp使用ucharts自定义修改y轴刻度,x轴颜色方法

在uniapp中使用ucharts自定义统计图表比较麻烦,由于官方文档我觉得写的不是很完整,所以总结了一些修改的方法供参考:

1、修改图表中的数据文案格式

查看位于组件文件夹下的u-chart.js文件,可以查看到一些绘制图标的源码,找到drawPointText方法。

function drawPointText(points, series, config, context, opts) {
	// 绘制数据文案
	var data = series.data;
	var textOffset = series.textOffset ? series.textOffset : 0;
	points.forEach(function(item, index) {
		if (item !== null) {
			context.beginPath();
			var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize;
			context.setFontSize(fontSize);
			context.setFillStyle(series.textColor || opts.fontColor);
			var value = data[index]
			if (typeof data[index] === 'object' && data[index] !== null) {
				if (data[index].constructor.toString().indexOf('Array') > -1) {
					value = data[index][1];
				} else {
					value = data[index].value
				}
			}
			var formatVal = series.formatter ? series.formatter(value, index, series, opts) : value;
			context.setTextAlign('center');
			context.fillText(String(formatVal), item.x, item.y - 4 + textOffset * opts.pix);
			context.closePath();
			context.stroke();
			context.setTextAlign('left');
		}
	});
}

通过源码可以看出设置字体颜色的参数为series.textColor或者opts.fontColor,由于opts.fontColor在绘制其他字体颜色时可能会用到,我们只想单独修改数据文案的字体颜色,所以就只设置series.textColor即可,在我们为chartData赋值时即可添加下改参数如图

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值