F2 drop pit summary

Project overview

This project is a pure HTML page, provided for app webview to use

In the early

• HTML direct introduction

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>
Copy the code

At this point I feel happy, wow comfortable

Mid –

chart.interaction('pan');
chart.scrollBar({
      mode: 'x'.xStyle: {
        offsetY: - 5}});Copy the code

Uncaught TypeError: chart.interaction is not a function at 
Copy the code

Uncaught TypeError: chart.scrollBar is not a function at 
Copy the code

what? 🙀 ❓

Could it be that my file version is low, well, the new version I came, after all, the somebody else official said
,

See what’s on the dead simple version, have 3.4.4, look for https://gw.alipayobjects.com/os/antv/assets/f2/3.4.4/f2.min.js

Sorry, the file you requested does not exist!

.

Try something else

Sorry, the file you requested does not exist!

.

Ask the authorities

Issues

⚠️ Please use https://antv-issue-helper.surge.sh ⚠️
The issue which is not created via https://antv-issue-helper.surge.sh will be closed immediately.
Copy the code

Hey! Not bad. So professional

Write a demo, post it to my website, operating system, browser environment, expected behavior, actual behavior, ok submit.

Frantically searching for questions,

• How do I register/use a plug-in

const F2 = require('@antv/f2/lib/index');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');

// Register the plugin ScrollBar
F2.Chart.plugins.register(ScrollBar); // Register the chart instance globally

// Or register a specific chart instance
const chart = new F2.Chart({
  id: 'canvas'.plugins: ScrollBar
});
Copy the code

Are there no online resources? Day’s gone

Frantically searching for questions,

The interactive module is not packaged into the @ANTV/F2 module package by default. Manual import is required, as follows

// First introduce F2
const F2 = require('@antv/f2/lib/index');

// Introduce all interactions
require('@antv/f2/lib/interaction/');

// If only one of the interactions needs to be introduced, use the following approach
/ / into pie - select
require('@antv/f2/lib/interaction/pie-select');

/ / the introduction of interval - select
require('@antv/f2/lib/interaction/interval-select');

/ / into the pan
require('@antv/f2/lib/interaction/pan');

/ / into the pinch
require('@antv/f2/lib/interaction/pinch');
Copy the code

Are there really no online resources? Two days have passed.

Er… Find out how to use the Node library in the browser.

Broswerfy can do it, hahaha, soqing, search broswerfy,

What is the difference between the three packing tools?

What is this? Webpack, Broswerfy,gulp, yeah, webpack works, let’s get started

Install webpack,

Write index. Js

The introduction of F2

window.F2 = require('@antv/f2');
window.ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
require('@antv/f2/lib/interaction/');
Copy the code

Wow, delicious, it works

In the late

This line map how to roll ah, WDNMD, crazy search, how are all kinds of small procedures, Voori

Yi? Require (‘@antv/ F2 /lib/index’); require(‘@antv/ F2 /lib/index’);

Change it. Oh, my God! How can it work? I gave me two slaps. What the hell?

Yi! How is the slide map gone, how is the canvas empty, crazy search, wipe, no. F2 what ghost ah, I began to regret, no way, have come to this point, brave scalp also have to go down

Wryyyyyyyyyyyyy, why I can’t, delete the relevant code, compare the method, yes, we are all similar,……

Wait. And here.

• my

const data = [
	{
		x:0,
		value:1
	},
	{
		x:0,
		value:1
	},
]
Copy the code

• It’s

const data = [
	
		{
            release:1900,
            count:100
        },
        {
            release:1900,
            count:100
        },
	
]
Copy the code

Attribute name, x changed to limit, run, run fine, I… wryyyyyyyyyy