9 |
10 | ## Change Theme
11 |
12 | You can change theme with the `BizCharts.setTheme(themeName)` API.
13 |
14 | Exmaple:
15 |
16 | ```jsx
17 | BizCharts.setTheme('dark');
18 | ```
19 |
20 | ## Customize Theme
21 | Also, by customizing the theme config and then call the `BizCharts.setTheme(themeConfig)` API.
22 |
23 | Example:
24 | ```jsx
25 | const seaTheme = {
26 | animate:false,
27 | colors:{},
28 | shapes:{},
29 | };
30 | BizCharts.setTheme(seaTheme);
31 | ```
32 | More detail about theme customization, reference [Theme API](/doc/api/theme.md)
33 |
--------------------------------------------------------------------------------
/doc/tutorial/theme.md:
--------------------------------------------------------------------------------
1 |
9 |
10 | # 主题
11 |
12 | **引用: [G2 Theme](https://antv.alipay.com/zh-cn/g2/3.x/tutorial/theme.html)**
13 |
14 | ## 图表主题
15 | Bizcharts 提供了两种内建的主题: `default` and `dark`.
16 |
17 |
18 | ## 如何改变主题
19 |
20 | 你可以通过 `BizCharts.setTheme(themeName)` API 来改变主题.
21 |
22 | Exmaple:
23 |
24 | ```jsx
25 | BizCharts.setTheme('dark');
26 | ```
27 |
28 | ## 自定义主题
29 | 当调用 `BizCharts.setTheme()` API 传入的参数是一个对象时，这个时候代表使用你自定义的主题配置。
30 |
31 | Example:
32 | ```jsx
33 | const seaTheme = {
34 | animate:false,
35 | colors:{},
36 | shapes:{},
37 | };
38 | BizCharts.setTheme(seaTheme);
39 | ```
40 |
41 | 更多的自定义配置项, 请参考 [Theme API](/doc/api/theme.md)
42 |
--------------------------------------------------------------------------------
/src/components/Legend/index.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Legend Component
3 | */
4 | import BaseComponent from '../Base';
5 | import PropTypes from 'prop-types';
6 |
7 | export default class Legend extends BaseComponent {
8 | static contextTypes = {
9 | addElement: PropTypes.func,
10 | updateElement: PropTypes.func,
11 | deleteElement: PropTypes.func,
12 | createId: PropTypes.func,
13 | getParentInfo: PropTypes.func,
14 | getViewId: PropTypes.func,
15 | }
16 |
17 | static childContextTypes = {
18 | addElement: PropTypes.func,
19 | updateElement: PropTypes.func,
20 | deleteElement: PropTypes.func,
21 | createId: PropTypes.func,
22 | getParentInfo: PropTypes.func,
23 | getViewId: PropTypes.func,
24 | }
25 |
26 | static defaultProps = {
27 | visible: true,
28 | }
29 |
30 | constructor(props) {
31 | super(props, 'Legend');
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | context: __dirname,
6 | devtool: '#inline-source-map',
7 | entry: [
8 | './index.js',
9 | ],
10 | output: {
11 | path: path.join(__dirname, 'build'),
12 | filename: 'bundle.js',
13 | },
14 | plugins: [
15 | new webpack.LoaderOptionsPlugin({
16 | debug: true
17 | })
18 | // new webpack.HotModuleReplacementPlugin(),
19 | // new webpack.NoErrorsPlugin()
20 | ],
21 | resolve: {
22 | extensions: ['.js', '.jsx'],
23 | alias: {
24 | 'bizcharts': path.join(__dirname, '..', 'src/index.jsx'),
25 | },
26 | },
27 | module: {
28 | loaders: [{
29 | test: /\.(js|jsx)$/,
30 | loaders: ['babel-loader'],
31 | include: [
32 | __dirname,
33 | path.join(__dirname, '..', 'src'),
34 | ],
35 | }],
36 | },
37 | };
38 |
--------------------------------------------------------------------------------
/plugin/slider/demo/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | context: __dirname,
6 | devtool: '#inline-source-map',
7 | entry: [
8 | './index.js',
9 | ],
10 | output: {
11 | path: path.join(__dirname, 'build'),
12 | filename: 'bundle.js',
13 | },
14 | plugins: [
15 | new webpack.LoaderOptionsPlugin({
16 | debug: true
17 | })
18 | // new webpack.HotModuleReplacementPlugin(),
19 | // new webpack.NoErrorsPlugin()
20 | ],
21 | resolve: {
22 | extensions: ['.js', '.jsx'],
23 | alias: {
24 | 'bizcharts-slider': path.join(__dirname, '..', 'src/index.jsx'),
25 | },
26 | },
27 | module: {
28 | loaders: [{
29 | test: /\.(js|jsx)$/,
30 | loaders: ['babel-loader'],
31 | include: [
32 | __dirname,
33 | path.join(__dirname, '..', 'src'),
34 | ],
35 | }],
36 | },
37 | };
38 |
--------------------------------------------------------------------------------
/doc/tutorial/interaction.md:
--------------------------------------------------------------------------------
1 |
2 | # 图表交互
3 |
4 | ## 默认交互
5 | 包括：
6 | - active 激活，鼠标hover。
7 | - select 选中，鼠标点击选择、框选。
8 |
9 | ## 激活
10 | 开启以及关闭 shape 对于鼠标 hover 时的响应效果，默认为各个 `bizcharts do not support set chart's separate theme, just support setTheme global. 28 | so when this chart is opened, the all charts's theme is setted to dark. 29 |
30 |{key}
28 |components
38 | {items} 39 |Back to homepage
51 |{page}
52 | {components[group] && components[group][page] ? React.createElement(components[group][page]) : null} 53 |{key}
28 |components
38 | {items} 39 |Back to homepage
51 |{page}
52 | {components[group] && components[group][page] ? React.createElement(components[group][page]) : null} 53 |