美文网首页
Bizcharts图表内容不居中

Bizcharts图表内容不居中

作者: big_fang | 来源:发表于2019-01-04 17:33 被阅读0次

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:当只有一组数据的时候,其实是有俩个数据的对比(例子中的ACMECompitor对比),需要显示出对比的效果:

这个就需要让折线图的转折点显示出来。

    <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>
Q1和Q2问题解决之后的图表显示.png

参考来源:
1、图表内容不居中 #393
2、曲线折线图实例

相关文章

网友评论

      本文标题:Bizcharts图表内容不居中

      本文链接:https://www.haomeiwen.com/subject/cgehrqtx.html