关于折线图颜色变化问题

[talenHuang]

• F2 Version: 3.2.1
• Platform: android
  我想实现这个效果
  

// 绘制线
            chart
                .line()
                .shape('smooth')
                .position('x*y')
                .color('x', x => {
                    if (+x > 3 && +x < 8) {
                        return '#000';
                    }

                    return '#aa00aa';
                });

// 绘制点
            chart
                .point()
                .shape('smooth')
                .position('x*y')
                .color('x', x => {
                    if (+x > 3 && +x < 8) {
                        return '#000';
                    }

                    return '#aa00aa';
                })
                .style({
                    stroke: '#fff',
                    lineWidth: 1,
                });

            chart.render();

想通过判断改变在条件中的颜色，但是线没有效果，只有点有效果。请问下是什么原因？是不是不能用这个方法实现这种效果，如果是，能不能推荐一种方法呢？

[simaQ]

恩，是的，不能使用这种方法实现。这种场景，使用 chart.guide() 辅助元素来实现。

参见 demo: https://codepen.io/Sima/pen/pOdJOm

说明：

1. @antv/f2 下默认不包含 chart.guide().point() 和 chart.guide().regionFilter()， 使用时需要引入
2. 或者直接引入 @antv/f2/lib/index-all

我 demo 中直接引入了 https://unpkg.com/@antv/f2@3.2.2/dist/f2-all.min.js

[talenHuang]

@simaQ 我引用的是完整版的f2

import f2 from '@antv/f2';
import f2Chart from './components/f2-chart';

在使用 chart.guide().regionFilter方法时会报错

[talenHuang]

@simaQ f2版本是3.2.1

[simaQ]

[simaQ]

import f2 from '@antv/f2/lib';
import f2Chart from './components/f2-chart';
require('@antv/f2/lib/component/guide/point'); // 加载 Guide.Point 组件
require('@antv/f2/lib/component/guide/regionFilter'); // 加载 Guide.RegionFilter 组件

https://antv.alipay.com/zh-cn/f2/3.x/api/guide.html

[talenHuang]

@simaQ 谢谢，这个我已经看过了，按照api来引入

// require('@antv/f2/lib/component/guide');
require('@antv/f2/lib/component/guide/point'); // 只加载 Guide.Point 组件
require('@antv/f2/lib/component/guide/region-filter'); // 只加载 Guide.RegionFilter 组件
const Guide = require('@antv/f2/lib/plugin/guide');

// 第三步：注册插件 Guide
f2.Chart.plugins.register(Guide);

单独引入这两个依然还是这个错误：

如果不单独引入，引入全部：

import f2 from '@antv/f2';
require('@antv/f2/lib/component/guide');
// require('@antv/f2/lib/component/guide/point'); // 只加载 Guide.Point 组件
// require('@antv/f2/lib/component/guide/region-filter'); // 只加载 Guide.RegionFilter 组件
const Guide = require('@antv/f2/lib/plugin/guide');

// 第三步：注册插件 Guide
f2.Chart.plugins.register(Guide);

则会出现这个错误：

谢谢φ(>ω<*)

[simaQ]

@antv/f2 里面已经注册了 Guide 插件，你只需要按照我刚才给你的引入即可，这里再重复一变：

// 统一从 lib 目录下引入！！！！！！！！！！！！！！！！
import f2 from '@antv/f2/lib/index';
require('@antv/f2/lib/component/guide/point'); // 加载 Guide.Point 组件
require('@antv/f2/lib/component/guide/region-filter'); // 加载 Guide.RegionFilter 组件

不需要再 register 了。如果还有错误，你看看是不是 import f2Chart from './components/f2-chart; 这个引起的

[talenHuang]

@simaQ 感谢感谢，，已经解决了
另外，建议一下，我直接引f2没有从lib上引是因为文档是这么写的

建议文档可以在一开始说明一下。
第二就是在引入reginonFilter时，官网是这么引的：

跟目录有点出入，建议更新一下

[simaQ]

恩，这个文档是我笔误，我更新下，多谢指正。