IOS下不显示 折线图平移图表
coderJCWang opened this issue · 0 comments
coderJCWang commented
import F2 from "@antv/f2/lib/index";
import ScrollBar from '@antv/f2/lib/plugin/scroll-bar';
import Interaction from '@antv/f2/lib/interaction/';
chartData: any = [
{
step: 427,
time: "2021-04-19",
index:0,
},
{
step: 1500,
time: "2021-04-20",
index:1,
},
{
step: 300,
time: "2021-04-20",
index:1,
},
{
step: 100,
time: "2021-04-20",
index:1,
},
];
kchartInit(data){
console.log('=====chartInit======');
// 在实例化前强制设置为单字体
F2.Global.fontFamily = 'sans-serif';
var dates = [];
data.forEach(function(obj) {
dates.push(obj.time)
})
var newArr = dates.reduce((pre, cur) => {
if (!pre.includes(cur)) {
return pre.concat(cur)
} else {
return pre
}
}, [])
// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
id: 'step-trend',
pixelRatio: window.devicePixelRatio,
plugins: [ScrollBar, Interaction],
});
console.log('=====chartInit1======');
chart.source(data, {
time: {
type: 'timeCat',
mask: 'MM-DD',
range: [0, 1],
values: newArr.slice(0, 7)
}
});
console.log('=====chartInit2======');
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [ 3, 5 ]
},
nameStyle: {
fill: '#fff'
},
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
}
});
chart.line().position('time*step');
console.log('=====chartInit3======');
chart.point().position('time*step').style({
lineWidth: 1,
fill: '#fff'
});
console.log('=====chartInit4======');
chart.interaction('pan');
console.log('=====chartInit5======');
// 定义进度条
chart.scrollBar({
mode: 'x',
xStyle: {
offsetY: -10
}
});
console.log('=====chartInit6======');
chart.render();
}
方法走了 但是图表却不显示。