图例配置

    图例配置在 中.全局配置在 Chart.defaults.global.legend

    位置

    图例的位置选项:

    • 'left'
    • 'bottom'
    • 'right'

    图例标签配置使用label关键字。

    名称类型默认值描述
    boxWidthNumber40宽度
    fontSizeNumber12字体大小
    fontStyleString'normal'字体样式
    fontColorColor'#666'字体颜色
    String"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"字体集
    paddingNumber10每个图例之间的间距
    generateLabelsFunction为图例中的每个事物生成图例项目。默认实现返回颜色框的文本+样式。有关详细信息,请参阅。
    filterFunctionnull从图例中过滤图例。接收 2 个参数,图例项目>)和图表数据。
    usePointStyleBooleanfalse标签样式将匹配相应的点样式(大小基于 fontSize,boxWidth 不在这种情况下使用)。

    图例项目接口

    以下示例将创建一个启用了legend的图表,并将所有文本的颜色变为红色。

    自定义点击操作

    点击legend中的项目触发不同的行为,可以通过在配置对象中使用回调来轻松实现。

    默认操作为:

    此时当你单击此图表中的legend时,前两个数据集的可见性将会链接在一起。

    有时你需要一个非常复杂的legend,在这种情况下有必要使用HTML legend。 图表在其原型上提供了一个generateLegend()方法,该方法返回legend的HTML字符串。

    要配置如何生成此legend,可以更改legendCallback配置属性。