上一节:
下一节:

  ChartJS 字体颜色

  • 字体

    共有4个特殊的全局设置更改图表上的字体。这些选项在 Chart.defaults.global 中。全局字体设置仅适用于配置中不包含更多特定选项的情况。
    名称 类型 默认值 描述
    defaultFontColor Color '#666' 默认字体颜色
    defaultFontFamily String "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 默认字体集
    defaultFontSize Number 12 文本的默认字体大小（以px为单位）。不适用于径向线性刻度标签。
    defaultFontStyle String 'normal' 默认字体样式。不适用于工具提示标题或页脚。不适用于图表标题。
    例如，在这个图表中，除了图例中的标签外，文本都是红色的。 
    Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // 这个更具体的字体属性覆盖全局属性
                fontColor: 'black'
            }
        }
    }
});
    尝试一下
    如果为系统上存在的图表指定了字体，则浏览器在设置时不会应用该字体。 如果您发现图表中出现奇怪的字体，请检查您正在应用的字体是否存在于您的系统中。

  • 颜色

    当向Chart选项提供颜色时，可以使用多种格式。 您可以将颜色指定为十六进制、RGB或HSL。 如果未指定颜色，Chart.js将使用全局默认颜色。
    此颜色存储在 Chart.defaults.global.defaultColor 中。初始值为 rgba(0，0，0，0.1)。
    您也可以传递 CanvasGradient 对象。 在传递到图表之前，你需要先创建它以实现一些有趣的效果。
    一个替代选项是传递CanvasPattern或 CanvasGradient 对象，而不是字符串颜色。
    例如，如果要填充图案的数据集，则可以执行以下操作: 
     var canvas = document.getElementById('chart');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'https://www.jc2182.com/images/f3.jpg';
img.onload = function() {
    var fillPattern = ctx.createPattern(img, 'repeat');
    var data = {
        "labels":
        ["January","February","March","April","May","June","July"],
        "datasets":[
            {
                "label":"My First Dataset",
                "data":[65,59,80,81,56,55,40],
                "fill":false,
                "borderColor":fillPattern,
                "lineTension":0.1
            }
        ]
    }
    let chart = new Chart(ctx, {
        type: 'line',
        data: data
    });
};
    尝试一下
    更多颜色的教程请查阅我们的《颜色教程》
上一节:
下一节: