A, antv/f2

Antv/F2 is an out of the box mobile visualization plug-in, alipay bar chart, pie chart and linear graph part of it to implement ANTV/F2 documents

Two, some annoying things

1. The bar chart can slide left and right

  • First of all, the example of the document can only show the data of the first batch, and the left and right sliding will cause the data missing. At present, I don’t know the reason, please inform me if you know, and you can see the official examplecodesandboxIf the data is incorrect, change the address of the data request, or define one yourselfdataTry)
  • I saw an issue on Github that was not resolved at the time of publication

The first solution:

With the hidden slide, all the data is rendered normally, and the overflow property is set to scroll through the outer element

Advantages: Obviously, the sliding effect is very smooth

Cons: Calculate the total width of the canvas when you need to render

<div class="outer">
  <div class="inner">
    <canvas id="chart"></canvas>
  </div>
</div>
Copy the code

The second solution:

The official bar chart has a problem with sliding left and right, but the line chart does not. See this line chart example, so we can render the line chart and then render the bar chart again. Although this sounds like a very problematic approach, the main Settings are given below

Pros: You finally have the document effect

Disadvantages: Because it is a line chart deformation, the first and last data can not be shown completely, sliding is not smooth

  this.chart.source(this.data, {
    release: {
      min: 2010.max: 2015}});this.chart
    .line()
    .position('release*count')
    .style({
      lineWidth: 0   // Set the polyline thickness to 0
    })
  // Render the line chart again and then render the bar chart again
  this.chart
    .interval()
    .position('release*count')
  this.chart.interaction('pan');
  this.chart.render();
Copy the code

2. Label of the pie chart

You can use PieLabel to draw the line text of the pie chart, but if there is too much data, there will be a serious rendering problem, that is, the rendered graph will collapse directly due to too many labels, although PieLabel can use skipOverlapLabels property to not display overlapping labels. But the reality is that there are still a lot of label rendering problems. The top of the image below, skipOverlapLabels, is in effect and the left side collapses.

This problem can be solved if you can set the line style, but in the document, the setting of the line only accepts the configuration of the object type

LineStyle: {Object}, // The style of the connector

So I don’t know how to solve this. If you know the trouble, please let me know. I see that Alipay can draw part of it.

Then I have to take a knife to discuss with the product, finally, rendering the first n bits of data, the data behind the ‘other’ to replace