最近接的新项目,使用的是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:借用了官网示例中的图形