样式(Styling)

有许多选项可用于设置坐标轴的样式。以下是设置网格线刻度的配置。

网格线配置

网格线配置嵌套在gridLines配置下。它定义垂直于轴线的网格线的选项。

名称类型默认值描述
displayBooleantrue如果为false,则不显示该轴的网格线
colorColor or Color[]'rgba(0, 0, 0, 0.1)'网格线的颜色。如果指定为数组,则第一种颜色适用于第一个网格线,第二种适用于第二个网格线,依此类推
borderDashNumber[][]网格线上的折号的长度和间距。 参看 MDN
borderDashOffsetNumber0线破折号的偏移量 参见 MDN
lineWidthNumber or Number[]1网格线的行程宽度
drawBorderBooleantrue如果为true,则在坐标轴和图表区域之间的边缘绘制边框
drawOnChartAreaBooleantrue如果为true,则在轴线内的图表区域绘制线条。当有多个轴并且您需要控制绘制哪些网格线时,该选项将会很有帮助
drawTicksBooleantrue如果为true,则在图表旁边的轴区域中的刻度旁绘制线条
tickMarkLengthNumber10绘制到坐标轴区域内的网格线的长度(以像素为单位)
zeroLineWidthNumber1第一个索引(索引0)的网格线的行绘制宽度
zeroLineColorColor'rgba(0, 0, 0, 0.25)'第一个索引(索引0)的网格线的绘制颜色
zeroLineBorderDashNumber[][]第一个索引(索引0)的网格线的连接号的长度和间距。请参阅MDN
zeroLineBorderDashOffsetNumber0第一个索引(索引0)的网格线的连接号。请参阅MDN
offsetGridLinesBooleanfalse如果为true,则将标签移动到网格线之间。一般用于条形图中,通常不应使用。 `

刻度配置

tick配置嵌套在ticks配置下的scale配置。其定义了坐标轴生成的刻度线的选项。

名称类型默认值描述
callbackFunction返回应在图表上显示的刻度值(字符串表示形式) 参考 callback.
displayBooleantrue如果为true,则显示刻度标记
fontColorColor'#666'刻度标签字体颜色
fontFamilyString"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"刻度标签的字体,遵循CSS字体家族选项
fontSizeNumber12刻度标签的字体大小
fontStyleString'normal'刻度标签的字体样式,遵循CSS字体样式选项(即normal, italic, oblique, initial, inherit)
reverseBooleanfalse刻度标签反序