当图表内的数据只有一组时,会紧靠在y轴上,如下图:

想要图表的内容居中,解决方法分两种情况。

第一种:如果x轴是日期,则代码设置如下,图表的内容就居中了

 const cols = {
x: {
alias: "日期",
type: "timeCat",
mask: "MM-DD",
}
value: {
max:200,
min: 0,
},
}; <Chart height={height} padding={padding} data={dv} scale={cols} forceFit></Chart>

第二种:如果x轴是单纯的年份,则代码设置如下,图表的内容就居中了

const cols = {
x: { }
value: {
max:200,
min: 0,
},
}; <Chart height={height} padding={padding} data={dv} scale={cols} forceFit></Chart>

上面的两种情况也可以加

range: data.length > 1? [0, 1]: [0.5, 1],
 x: {
alias: "日期",
type: "timeCat",
mask: "MM-DD",
range: data.length > 1? [0, 1]: [0.5, 1],
} 或者 x: {
range: data.length > 1? [0, 1]: [0.5, 1],
}

bizcharts 图表内容居中的更多相关文章

  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  2. android RelativeLayout 内容居中解决办法

    android RelativeLayout 内容居中解决办法:   使用Linearlayout本来利用父控件的gravity属性是很好解决的.但是对应RelativeLayout虽然有 gravi ...

  3. div中的内容居中

    要使div中的内容居中显示,不仅div要设定“text-align:centr"  ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.

  4. gridcontrol显示行号,总行,打印,导出Excel,设置标头及内容居中方法

    1.一般为了表格显示数据更直观,经常会显示行号以及总数.让gridcontrol显示行号,首先你需要设置一下显示行号的宽度,也就是IndicatorWith.默认值为-1,可根据实际数值需要设置宽度, ...

  5. HTML 文本内容居中

    简单描述:使用bootstrap 的model弹出框,里边的标题内容是靠左的,想把内容居中. 操作:给标题的class加上"text-center". 另外 我发现,在使用mode ...

  6. div宽高不确定,内容居中

    当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...

  7. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...

  8. DataGridView列标题居中,内容居中

    //列标题居中 dataGridView1.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleC ...

  9. JQuery datatables 标题和内容居中显示

    1.如题,使用到了强大的表格插件datatables,要使标题和内容都居中显示,只需要在jsp引入css,写上如下内容即可: /*qiulinhe:2016年11月7日13:48:26*/ /* da ...

随机推荐

  1. 智能家居-3.基于esp8266的语音控制系统(软件篇)

    智能家居-1.基于esp8266的语音控制系统(开篇) 智能家居-2.基于esp8266的语音控制系统(硬件篇) 智能家居-3.基于esp8266的语音控制系统(软件篇) 赞赏支持 QQ:505645 ...

  2. Git 分支代码管理日记备注

    1〉  Bithucket 创建代码库 2〉  下载克隆代码 Git clone 代码链接 3〉  代码初始化完成之后,切换到代码文件夹 cd 文件夹名 4〉  查看分支情况 Git brach 5〉 ...

  3. 如何使用 Set 来提高JS代码的性能

    摘要: 高效使用Set! 作者:前端小智 原文:如何使用 Set 来提高代码的性能 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 我确信有很多开发人员坚持使 ...

  4. docker仓库资源的地址修改

    docker仓库资源的地址修改 1.新增或者修改/etc/docker目录下的daemon.json文件 样例文件如下 { "registry-mirrors": ["h ...

  5. AssetBundleMaster_ReadMe_EN

    Before we start use it, you'd better import it to an empty project, following the ReadMe to learn th ...

  6. Java八大排序之插入排序

    插入排序 也可叫直接插入排序,该算法的思路是:初始可认为文件中的第1个记录已排好序,然后将第2个到第n个记录依次插入到已排序的记录组成的文件中. 步骤: 假设有一组数组为(数组下标0—n-1): ar ...

  7. visual studio之X64调试问题

    这个问题没有解决. 只能X86啦!

  8. jenkins部署报404错误

    环境:tomcat 7+jdk1.7+win10 64 jenkins_1.5.23 部署完成后服务器启动输入网址:http://192.168.3.100:8080/jenkins打开无法访问报40 ...

  9. Python前言之编程语言

    编程语言分类(语言) ​ 编程语言是用来和计算机进行交互的,计算机只认识0和1. 机器语言(低级语言) 直接和硬件进行交互 用0和1和计算机进行沟通 缺点:开发效率低 优点:执行效率高 汇编语言 直接 ...

  10. LG2770/LOJ6122 航空路线问题 费用流 网络流24题

    问题描述 LG2770 LOG6122 题解 教训:关掉流同步之后就不要用其他输入输出方式了. 拆点. 两个拆点之间连\((1,1)\),其他连\((1,0)\) \(\mathrm{Code}\) ...