antvis/wx-f2

IOS下不显示 折线图平移图表

coderJCWang opened this issue · 0 comments

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();

}

方法走了 但是图表却不显示。