Q1:使用Bizcharts区域图的时候,当数据只有一条的时候,数据会紧靠在y轴上,如图:
但是我希望在数据只有一条的时候,数据展示在中间位置,修改其中scale定义中的range部分代码:
// 修改后代码
year: {
range: data.length > 1 ? [0, 1] : [0.5,1]
}
// 原代码
year: {
range: [0, 1]
}
Q2:在实际项目中,发现一个问题,当year不是整年,而是2016-02-01
这样的格式,range这样设置不起作用。经搜索发现需要添加type来兼容这种格式的:
type
类型:string
描述: 度量的类型,可选值有:linear、cat、log、pow、time 和 timeCat.
year: {
range: data.length > 1
? {
range: [0, 1],
}
:{
type: 'cat', // cat: 分类类型
range: [0.5, 1],
},
}
Q3:当只有一组数据的时候,其实是有俩个数据的对比(例子中的ACME
与Compitor
对比),需要显示出对比的效果:
这个就需要让折线图的转折点显示出来。
<Geom type='point' position="year*value" size={4} shape={'circle'} color={'type'} style={{ stroke: '#fff', lineWidth: 1}} />
// 上述代码放入图表组件中:
<Chart height={300} data={dv} padding={'auto'} scale={scale} forceFit>
<Tooltip crosshairs />
<Axis />
<Legend />
<Geom type="area" position="year*value" color="type" shape='smooth' />
<Geom type="line" position="year*value" color="type" shape='smooth' size={2} />
<Geom type='point' position="year*value" size={4} shape={'circle'} color={'type'} style={{ stroke: '#fff', lineWidth: 1}} />
</Chart>
参考来源:
1、图表内容不居中 #393
2、曲线折线图实例