AntvF2 trampling pits and solution summary

  • AntvF2 line chart Horizontal scrolling chart blank & chaos chart

F2 version reduced to 3.5

  • Multiple tabs on the same page, slide the graph after switching

This may not be the best solution, only to this solution, can refer to, there is a better way to welcome the message!

// Declare a global control variable let controChart1 = null; ControChart1 = new f2.chart ({}) // After each TAB switch, first destroy Chart corresponding to the previous TAB with the control variable CONSTRolCharT2&& controlChart2.destory() constrolChart2 = nullCopy the code
  • Loading multiple charts on the same page at once renders incomplete

Incomplete rendering, the experimental result is that the previous picture was not finished and then the next one was drawn, resulting in incomplete rendering. The current solution is to add a delay of one drawing and then go to setTimeout() to call the next rendering

  • Use the clear method if you only need to clear data rather than destroy the canvas
  • Pie charts do not have default widths, and will occasionally get smaller when rendering
  • The data type of the chart axis must be Number. The String attribute is invalid
  • The diallel curve is displayed at its own value, not at the scale of the vertical axis

Adjust (“stack”) as you render; To get rid of

At present encountered and solved the problem is these, have any questions welcome to leave a message oh yes, a small suggestion, the back end students return the data structure had better be like this, otherwise the front end will need to iterate modify the data structure ~

Data: [{date: "2020-05-01," name: "I am the first classification," num: 2000}, {date: "2020-05-01", name: "I am the second classification", num: 1000}, {date:"2020-05-02",name:" id ",num:3000}, {date:"2020-05-02",name:" id ",num:2000},] Group by name, Date X num c2chart1.interval ().position("date*num").color("name", ["#86A6F9", "#A4E0FA"]).adjust("stack");Copy the code