小程序用x轴文本旋转，超过x轴跑柱状图上面去了

cuteCloud commented 6 years ago

const app = getApp() import F2 from '../../components/ff-canvas/lib/f2'; let appointChart = null;

function appointChartInit(canvas, width, height) { // 使用 F2 绘制图表 var data = [ {value: 1, name: '12.05'}, {value: 12, name: '12.06'}, {value: 0, name: '12.07'}, {value: 452, name: '12.08'}, {value: 445, name: '12.09'}, {value: 98, name: '12.10'}, {value: 10, name: '12.11'}, {value: 45, name: '12.12'}, {value: 52, name: '12.13'}, {value: 98, name: '12.14'}, ]; appointChart = new F2.Chart({ el: canvas, width, height });

appointChart.source(data);

appointChart.legend(false);
appointChart.tooltip(false);

// 坐标轴文本旋转 appointChart.axis('name', { label: { rotate: -Math.PI / 4, textAlign: 'end' } });

appointChart.interval().position('name*value').color('#facf26').size(12)

// 柱状图添加文本 data.map(function(obj) { appointChart.guide().text({ position: [obj.name, obj.value], content: obj.value, style: { textAlign: 'center', textBaseline: 'bottom' }, offsetY: -4 }); }); appointChart.render(); return appointChart; } Page({ data: { opts1: { onInit: appointChartInit }, },

onLoad: function () {

},

})

cuteCloud commented 6 years ago

开发工具上面没有问题 iphone6实机上有这个问题

simaQ commented 6 years ago

这个应该是兼容性的问题

antvis / my-f2

小程序用x轴文本旋转，超过x轴跑柱状图上面去了 #4