# 样式
¥Styling
有许多选项可以设置轴的样式。有控制 网格线 和 刻度 的设置。
¥There are a number of options to allow styling an axis. There are settings to control grid lines and ticks.
# 网格线配置
¥Grid Line Configuration
命名空间:options.scales[scaleId].grid
,它为垂直于轴的网格线定义了选项。
¥Namespace: options.scales[scaleId].grid
, it defines options for the grid lines that run perpendicular to the axis.
名称 | 类型 | 可编写脚本 | 可转位 | 默认 | 描述 |
---|---|---|---|---|---|
circular | boolean | false | 如果为 true,则网格线是圆形的(仅在雷达和极地区域图上)。 | ||
color | Color | 是的 | 是的 | Chart.defaults.borderColor | 网格线的颜色。如果指定为数组,则第一种颜色适用于第一条网格线,第二种颜色适用于第二条网格线,依此类推。 |
display | boolean | true | 如果为 false,则不显示该轴的网格线。 | ||
drawOnChartArea | boolean | true | 如果为真,则在图表区域的轴线内绘制线条。当有多个轴并且你需要控制绘制哪些网格线时,这很有用。 | ||
drawTicks | boolean | true | 如果为真,则在图表旁边的轴区域中的刻度旁边画线。 | ||
lineWidth | number | 是的 | 是的 | 1 | 网格线的笔划宽度。 |
offset | boolean | false | 如果为真,网格线将移动到标签之间。对于柱状图,默认设置为 true 。 | ||
tickBorderDash | number[] | 是的 | 是的 | [] | 刻度线的长度和间距。如果未设置,则默认为网格线 borderDash 值。 |
tickBorderDashOffset | number | 是的 | 是的 | 刻度线破折号的偏移量。如果未设置,默认为网格线 borderDashOffset 值 | |
tickColor | Color | 是的 | 是的 | 刻度线的颜色。如果未设置,则默认为网格线颜色。 | |
tickLength | number | 8 | 网格线将绘制到轴区域中的长度(以像素为单位)。 | ||
tickWidth | number | 是的 | 是的 | 刻度线的宽度(以像素为单位)。如果未设置,则默认为网格线宽。 | |
z | number | -1 | 网格线层的 z-index。值 <= 0 绘制在数据集下方, > 0 绘制在顶部。 |
可编写脚本的上下文在 选项 部分中进行了描述。
¥The scriptable context is described in Options section.
# 刻度配置
¥Tick Configuration
# 所有轴的通用刻度选项
¥Common tick options to all axes
命名空间:options.scales[scaleId].ticks
¥Namespace: options.scales[scaleId].ticks
名称 | 类型 | 可编写脚本 | 默认 | 描述 |
---|---|---|---|---|
backdropColor | Color | 是的 | 'rgba(255, 255, 255, 0.75)' | 标签背景的颜色。 |
backdropPadding | Padding | 2 | 标签背景的填充。 | |
callback | function | 返回应显示在图表上的刻度值的字符串表示形式。见 callback。 | ||
display | boolean | true | 如果为真,则显示刻度标签。 | |
color | Color | 是的 | Chart.defaults.color | 刻度的颜色。 |
font | Font | 是的 | Chart.defaults.font | 见 字体 |
major | object | {} | 主要刻度配置。 | |
padding | number | 3 | 设置刻度标签相对于轴的偏移量 | |
showLabelBackdrop | boolean | 是的 | true 用于径向刻度,false 否则 | 如果为真,则在刻度标签后面绘制背景。 |
textStrokeColor | Color | 是的 | `` | 文本周围笔划的颜色。 |
textStrokeWidth | number | 是的 | 0 | 文本周围的笔画宽度。 |
z | number | 0 | 刻度层的 z-index。在图表区域绘制刻度时很有用。值 <= 0 绘制在数据集下方, > 0 绘制在顶部。 |
可编写脚本的上下文在 选项 部分中进行了描述。
¥The scriptable context is described in Options section.
# 主要刻度配置
¥Major Tick Configuration
命名空间:options.scales[scaleId].ticks.major
,它定义了轴生成的主要刻度线的选项。
¥Namespace: options.scales[scaleId].ticks.major
, it defines options for the major tick marks that are generated by the axis.
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
enabled | boolean | false | 如果为真,则生成主要刻度。主要刻度将影响自动跳过,并且 major 将在可编写脚本的选项上下文中的刻度上定义。 |
# 边框配置
¥Border Configuration
命名空间:options.scales[scaleId].border
,它定义了垂直于轴的边框选项。
¥Namespace: options.scales[scaleId].border
, it defines options for the border that run perpendicular to the axis.
名称 | 类型 | 可编写脚本 | 可转位 | 默认 | 描述 |
---|---|---|---|---|---|
display | boolean | true | 如果为真,则在轴和图表区域之间的边缘绘制边框。 | ||
color | Color | Chart.defaults.borderColor | 边框线的颜色。 | ||
width | number | 1 | 边框线的宽度。 | ||
dash | number[] | 是的 | [] | 网格线上破折号的长度和间距。见 MDN (opens new window)。 | |
dashOffset | number | 是的 | 0.0 | 虚线的偏移量。见 MDN (opens new window)。 | |
z | number | 0 | 边界层的 z-index。值 <= 0 绘制在数据集下方, > 0 绘制在顶部。 |