当图表内的数据只有一组时,会紧靠在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. 打印X

    ***.....***//    .***...***.//    ..***.***..//    ...*****...//    ....***....//    ...*****...//   ...

  2. Google开发者F12工具面板-network详解

    1 开发者工具面板    面板上包含了Elements面板.Console面板.Sources面板.Network面板.Performance面板.Memory面板.Application面板.Sec ...

  3. Python游戏开发——打砖块

    打砖块游戏向来大家也不会很陌生,今天来用python来开发一下这个小游戏 1.引用对应数据库 import pygame from pygame.locals import * import sys, ...

  4. 图书推荐《图解HTTP》

    作品简介 本书对互联网基盘——HTTP协议进行了全面系统的介绍.作者由HTTP协议的发展历史娓娓道来,严谨细致地剖析了HTTP协议的结构,列举诸多常见通信场景及实战案例,最后延伸到Web安全.最新技术 ...

  5. DevExpress的TreeList怎样给树节点设置图标

    场景 DevExpress的TreeList怎样设置数据源使其显示成单列树形结构: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...

  6. deepin把vscode设为默认文本应用

    一开始我想自己写一个desktop文件放在/usr/share/applications下面,结果在右键菜单里面找不到vscode. [Desktop Entry] Categories=Develo ...

  7. Java面试复习(纯手打)

    1.面向对象和面向过程的区别: 面向过程比面向对象高.因为类调用时需要实例化,开销比较大,比较消耗资源,所以当性能是最重要的考量因素得时候,比如单片机.嵌入式开发.Linux/Unix等一般采用面向过 ...

  8. SAP MM 同一个序列号可以被多次用在交货单发货过账?

    SAP MM 同一个序列号可以被多次用在交货单发货过账? 如下公司间转储订单,从公司代码CSAS转入公司代码HKCS, 物料有启用序列号管理. 转储数量为5 PC.该STO单据共计有2个外向交货单 8 ...

  9. vue--购物车案例(小知识点总结)

    Html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  10. Linux Kernel PANIC(三)--Soft Panic/Oops调试及实例分析【转】

    转自:https://blog.csdn.net/gatieme/article/details/73715860 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...