Comments (6)
发一下再现的 demo(codepen 等)
from data-set.
我就是使用的贵公司的antd pro 2.0版本,基本没有改动,github拉下来的最新版本代码在开发环境下跑,离线状态下分析页(中间有bizchart图表组件)也是不显示的,这是我的配置文件
{
"name": "ant-design-pro",
"version": "2.1.0",
"description": "An out-of-box UI solution for enterprise applications",
"private": true,
"scripts": {
"presite": "node ./scripts/generateMock.js && cd functions && npm install",
"start": "cross-env APP_TYPE=site umi dev",
"start:no-mock": "cross-env MOCK=none umi dev",
"build": "umi build",
"site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy",
"analyze": "cross-env ANALYZE=1 umi build",
"lint:style": "stylelint \"src/**/*.less\" --syntax less",
"lint": "eslint --ext .js src mock tests && npm run lint:style",
"lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js",
"test": "umi test",
"test:component": "umi test ./src/components",
"test:all": "node ./tests/run-tests.js",
"prettier": "prettier --write ./src/**/**/**/*",
"docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
"docker:build": "docker-compose -f ./docker/docker-compose.dev.yml build",
"docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
"docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build"
},
"dependencies": {
"@antv/data-set": "^0.9.6",
"@antv/g2": "^3.3.1",
"@babel/runtime": "^7.1.2",
"antd": "^3.10.0",
"bizcharts": "^3.2.2",
"bizcharts-plugin-slider": "^2.0.3",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"enquire-js": "^0.2.1",
"hash.js": "^1.1.5",
"lodash": "^4.17.10",
"lodash-decorators": "^6.0.0",
"memoize-one": "^4.0.0",
"moment": "^2.22.2",
"numeral": "^2.0.6",
"nzh": "^1.0.3",
"omit.js": "^1.0.0",
"path-to-regexp": "^2.4.0",
"prop-types": "^15.5.10",
"qs": "^6.5.2",
"rc-animate": "^2.4.4",
"react": "^16.5.1",
"react-container-query": "^0.11.0",
"react-copy-to-clipboard": "^5.0.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.5.1",
"react-fittext": "^1.0.0",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"@types/react": "^16.4.16",
"@types/react-dom": "^16.0.9",
"antd-pro-merge-less": "^0.0.9",
"antd-theme-webpack-plugin": "^1.1.8",
"babel-eslint": "^10.0.1",
"cross-env": "^5.1.1",
"cross-port-killer": "^1.0.1",
"enzyme": "^3.7.0",
"eslint": "^5.4.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-compat": "^2.6.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-markdown": "^1.0.0-beta.6",
"eslint-plugin-react": "^7.11.1",
"gh-pages": "^2.0.1",
"husky": "^1.1.2",
"lint-staged": "^7.2.0",
"merge-umi-mock-data": "^0.0.3",
"mockjs": "^1.0.1-beta3",
"prettier": "1.14.3",
"pro-download": "^1.0.1",
"stylelint": "^9.4.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.0.0",
"umi": "^2.1.2",
"umi-plugin-ga": "^1.1.3",
"umi-plugin-react": "^1.1.1"
},
"optionalDependencies": {
"puppeteer": "^1.9.0"
},
"lint-staged": {
"**/*.{js,jsx,less}": [
"prettier --write",
"git add"
],
"**/*.{js,jsx}": "npm run lint-staged:js",
"**/*.less": "stylelint --syntax less"
},
"engines": {
"node": ">=8.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
}
}
主要就是离线不能用的问题,有联网的情况下是正常的
from data-set.
发一下 webpack 配置(或者 bigfish 的配置)
from data-set.
应该是你使用了 external 的方式引入 dataset 了,这个是构建问题,不是库本身的问题
from data-set.
我上面发的就是webpage配置信息....详细的在这里
"dependencies": { "@antv/data-set": "^0.9.6", "@babel/runtime": "^7.1.2", "antd": "^3.10.3", "bizcharts": "^3.2.2", "bizcharts-plugin-slider": "^2.0.3", "classnames": "^2.2.6", "dva": "^2.4.0", "enquire-js": "^0.2.1", "hash.js": "^1.1.5", "lodash": "^4.17.10", "lodash-decorators": "^6.0.0", "memoize-one": "^4.0.0", "moment": "^2.22.2", "numeral": "^2.0.6", "nzh": "^1.0.3", "omit.js": "^1.0.0", "path-to-regexp": "^2.4.0", "prop-types": "^15.5.10", "qs": "^6.5.2", "rc-animate": "^2.4.4", "react": "^16.5.1", "react-container-query": "^0.11.0", "react-copy-to-clipboard": "^5.0.1", "react-document-title": "^2.0.3", "react-dom": "^16.5.1", "react-fittext": "^1.0.0", "react-magic": "^0.2.3", "react-router-dom": "^4.3.1" },
我的自定义组件
`
import React from 'react';
import { Chart, Tooltip, Geom } from 'bizcharts';
import DataSet from '@antv/data-set';
import autoHeight from '../autoHeight';
import styles from '../index.less';
@autoHeight()
class GroupMiniBar extends React.Component {
render() {
const { height, forceFit = true, color = ['green', 'yellow'], data = [] } = this.props;
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['series1', 'series2'],
// 展开字段集
key: 'type',
// key字段
value: 'value', // value字段
});
const padding = [36, 5, 18, 5];
const tooltip = [
'type*value',
(x, y) => ({
name: x,
value: y,
}),
];
const cols = {
key: {
type: 'cat',
tickInterval: 0,
},
};
// for tooltip not to be hide
const chartHeight = height + 64;
return (
<div className={styles.miniChart} style={{ height }}>
<div className={styles.chartContent}>
<Chart scale={cols} height={chartHeight} forceFit={forceFit} data={dv} padding={padding}>
<Tooltip crosshairs={false} />
<Geom
type="interval"
size="19"
position="label*value"
color={['type', color]}
tooltip={tooltip}
adjust={[
{
type: 'dodge',
marginRatio: 7 / 13,
},
]}
/>
</Chart>
</div>
</div>
);
}
}
export default GroupMiniBar;
`
ts文件:
`import * as React from 'react';
export interface IGroupMiniBarProps {
color?: string;
height: number;
data: Array<{
x: number | string;
y: number;
}>;
style?: React.CSSProperties;
}
export default class GroupMiniBar extends React.Component<IGroupMiniBarProps, any> {}
`
Analysis组件内使用
<GroupMiniBar data={visitData3} color={['#5DCF43', '#FF492B']} />
确实有通过引用外部,在document.ejs中:
`
但是注销掉外部引用也没有用,而我本地是按照官网文档引入的,请问有啥错误么? 麻烦指点一下。
from data-set.
我是说 webpack 配置。。。离线不能使用是因为用了在线的 CDN 版本,构建的时候 require('@antv/data-set') 其实拿的是 window.DataSet,而没有把 dataset 的源码合进最终的代码里。这个是和 dataset 无关的问题,你问问 antd-pro 怎么解决吧。
from data-set.
Related Issues (20)
- readme上的api文档链接失效了,跳转404 HOT 1
- [email protected] 里 build/d3-hexjson.min.js 中有 ES6 语法(const)
- @antv/data-set打包后文件过大如何解决 HOT 8
- orderBy 排序失败 HOT 2
- 会支持webworker吗
- Vite build后生产版本,运行时出现dagre库引用无效文件 HOT 2
- vite打包下dagre里require的问题
- csv源数据有相同column名,数据接入自动去重了
- TypeError: Cannot read properties of undefined (reading 'Graph')
- 来个好心人提取 transform 到 单独 npm包 ? HOT 3
- @antv/data-set 0.11.8 依赖的 ml-matrix 编译失败,在线等,急急急!!!
- Dateset build size is big, how to use parts of it? HOT 3
- d3-hexjson依赖项中含有es6语法造成某些情况下无法正常使用
- transform diagram.sankey 不支持排序
- [BUG] transform 丢失字段
- histogram的dataset 没有进行默认的Sturges 或者其他计算 HOT 1
- readme上的api文档链接失效了
- This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export. HOT 6
- 使用transform aggregate的 sum 累加时候,小数点存在精度丢失问题 HOT 1
- tag-cloud throw
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from data-set.