图例配置
图例配置在 中.全局配置在 Chart.defaults.global.legend
。
位置
图例的位置选项:
'left'
'bottom'
'right'
图例标签配置使用label
关键字。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
boxWidth | Number | 40 | 宽度 |
fontSize | Number | 12 | 字体大小 |
fontStyle | String | 'normal' | 字体样式 |
fontColor | Color | '#666' | 字体颜色 |
String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | 字体集 | |
padding | Number | 10 | 每个图例之间的间距 |
generateLabels | Function | 为图例中的每个事物生成图例项目。默认实现返回颜色框的文本+样式。有关详细信息,请参阅。 | |
filter | Function | null | 从图例中过滤图例。接收 2 个参数,图例项目>)和图表数据。 |
usePointStyle | Boolean | false | 标签样式将匹配相应的点样式(大小基于 fontSize,boxWidth 不在这种情况下使用)。 |
图例项目接口
以下示例将创建一个启用了legend的图表,并将所有文本的颜色变为红色。
自定义点击操作
点击legend中的项目触发不同的行为,可以通过在配置对象中使用回调来轻松实现。
默认操作为:
此时当你单击此图表中的legend时,前两个数据集的可见性将会链接在一起。
有时你需要一个非常复杂的legend,在这种情况下有必要使用HTML legend。 图表在其原型上提供了一个generateLegend()
方法,该方法返回legend的HTML字符串。
要配置如何生成此legend,可以更改legendCallback
配置属性。