viser-react 爬坑记录1.柱状图,在值为null时依旧显示图形

1,062 阅读1分钟

最近接的新项目,使用的是viser-react, 虽然功能强大,但是文档简单,打开速度有时候还挺慢,对于我这个刚进入可视化行列的小白来说,很不友好。 最近遇到两个问题。

1.柱状图,在值为null时依旧显示图形

    const testData = [
      {year: "1951 年",sales: null},
      {year: "1952 年",sales: null},
      {year: "1956 年",sales: null},
      {year: "1957 年",sales: null},
    ];
    -------------------------------------
    <Chart forceFit height={370} data={data} padding={[20, 'auto', 60, 'auto']}}>
        <Tooltip htmlContent={this.htmlContent}/>
        <Axis />
        <Legend />
        <Interval
            position="sales*year"
            color={['sales', color]}
            adjust={[{ type: 'dodge', marginRatio: 1 / 32 }]} 
        />
    </Chart>

乍看之下,毫无问题。这就犯难了。翻看文档,也没有找到什么方法。于是我使用了删除法删除了一些文档图形中的一些属性,直到我删除了**scale **时。omg,官网示例也出现了同样的情况。于是开心的补全,找产品交差去了。

 dv.transform({
    type: 'fold',
    fields: fieldColoms,
    key: 'type',
    value: 'value',
});
const data = dv.rows;
// 当value值为空时,页面中会显示图形,无y轴, 易造成混淆。设置tickInterval,可以解决
let hasNullValue = data.find(item => item.value === null);
const scale = hasNullValue ? [{
    dataKey: 'value',
    tickInterval: 5,
}] : [];
-------------------------------------
 <Chart forceFit height={370} data={data} padding={[20, 'auto', 60, 'auto']} scale={scale}>
    <Tooltip htmlContent={this.htmlContent}/>
    <Axis />
    <Legend />
    <Interval
        position="type*value"
        color={['dimension', color]}
        adjust={[{ type: 'dodge', marginRatio: 1 / 32 }]} 
    />
</Chart>

pass:借用了官网示例中的图形