第二章 概览

本章介绍了在其他章节中可以使用的通用配置选项，主要包括以下内容：

响应式图表（Responsive）定义了可以应用于所有图表的响应式图表选项；

设备分辨率（Device Pixel Ratio）定义了显示像素与渲染像素的比率；

图表交互（Interactions）定义了一些有关鼠标悬停在图表元素上时的交互行为选项；

参数（Options）定义了某些配置选项的相关内容；

颜色（Colors）定义了可以接受的颜色值；

字体（Font）定义了各种字体选项。

2.1 响应式图表

当基于窗口的尺寸改变图表的大小时，一个主要的限制是画布的渲染尺寸（canvas.width和canvas.height）不能表示为相对值，相反，应该使用显示的尺寸（canvas.style.width和canvas.style.height）。此外，这些尺寸彼此独立，画布渲染尺寸不会根据显示尺寸自动调整其大小，这就导致渲染不准确。

下面两种方式是不起作用的：

<canvas height="40vh" width="80vw"></canvas>

无效值，画布不会缩放。

<canvas style="height: 40vh; width: 80vw;"></canvas>

无效行为，画布虽然会缩放，但会变模糊。

Chart.js提供了一些选项用来创建响应式图表并控制图表的缩放行为，使得当画布的显示尺寸发生变化时能够自动更新渲染尺寸。

配置选项

重要提示

对画布尺寸变化的检测不能直接作用在canvas元素上。Chart.js使用画布的父元素（容器）更新画布的渲染尺寸和显示尺寸。然而，此方法要求容器是相对定位的，而且在此容器中只能包含一个canvas元素。此时就可以实现响应式图表了：

<div class="chart-container" style="position: relative; height: 40vh; width: 80vw;">
    <canvas id="chart"></canvas>
</div>

此时还可以通过脚本方式来修改容器的大小，从而对画布进行缩放：

chart.canvas.parentNode.style.height = '128px';

打印可缩放的图表

在打印一个页面时，可以使用CSS媒体查询来更改页面的样式。通过CSS媒体查询添加的CSS样式可能会导致图表缩放。然而，此时的缩放不会自动发生。为了在打印页面时实现对图表的缩放，需要监听onbeforeprint事件，并在此事件的处理函数中手动触发所有要打印图表的缩放操作。

function beforePrintHandler() {
    for(var id in Chart.instances) {
        Chart.instances[id].resize();
    }
}

2.2 设备像素比

默认情况下，图表的画布会使用1:1的像素比，除非物理显示有更高的像素比（比如视网膜显示器）。

对于那些需要将图表转换为位图的应用，或者需要打印到高DPI媒体对象上时，在渲染图表时将会使用更高的分辨率。

将devicePixelRatio的值设置为非1的一个数，会强制将画布尺寸相对于容器尺寸缩放到指定的值。这个应该在屏幕上看不出差别，只有在图片被放大或打印时才会看到差别。

配置选项

2.3 图表交互

鼠标悬停配置项会被传入到options.hover命名空间中。全局的鼠标悬停配置项是Chart.defaults.global.hover。要配置哪一个事件触发图表交互，请参阅“事件”。

交互模式

当通过hover或tooltips配置图表的交互时，可以使用若干不同的交互模式。主要有以下几种不同的交互模式（这些交互模式的行为都是通过intersect属性决定的）：

point

获取包含鼠标位置的所有元素：

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'point',
        },
    },
});

nearest

获取与鼠标位置最近的元素。最近元素是通过计算图表元素中心点与鼠标位置的距离来确定的。如果有两个或多个元素与鼠标位置的距离相同，将会使用面积最小的元素。如果intersect设置为true，则只会在鼠标位置位于图表元素之内时该元素才会触发交互。这对于混合式图表来说是很有用的。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'nearest',
        }
    }
});

single（已废弃）

找到与鼠标位置交互呃第一个元素并将其返回。它的行为与intersect为true时的nearest模式类似。

label（已废弃）

请查看index模式。

index

2.4 参数

脚本式选项

脚本式选项可以接受一个函数，此函数会被被一条数据调用，此函数有一个唯一的参数context，它表示上下文信息（请参阅“选项上下文”）。

例如：

color: function(context) {
    var index = context.dataIndex;
    var value = context.dataset.data[index];
    return value < 0 ? 'red' :
        index % 2 ? 'blue' :
        'green';
}

注：只有一些气泡图才支持脚本式选项。

索引式选项

索引式选项可以接受一个数组类型的值，图表中的每一个元素对应着数组中相同索引处的元素。需要注意的是，该方式可以提供任意多的数据，因此，在大多数情况下，使用函数更合适（如果支持的话）。

实例：

color: [
    'red',
    'blue',
    'green',
    'black',
]

选项上下文

选项上下文用于在解析选项时提供上下文信息，目前只能应用于脚本式选项中。

上下文对象包含如下属性：

chart：对应的图表实例

dataIndex：当前数据的索引

dataset：索引为datasetIndex处的数据集合

datasetIndex：当前数据集合的索引

重要提示：由于上下文可以表示不同类型的实体（数据集合、数据等），这就导致某些属性的值可能为undefined，因此，在使用某个上下文属性之前先要检测该属性是否存在。

2.5 颜色

在为图表选项提供颜色时，可以使用多种格式的颜色类型。可以使用十六进制格式的字符串、rgb格式的字符串或HSL格式的字符串作为颜色值。如果某个图表数据需要配置颜色，而又没有被指定颜色，则Chart.js会使用全局的默认颜色。默认的全局颜色存储在Chart.defaults.global.defaultColor属性中。其默认值为'rgba(0, 0, 0, 0.1)'。

模式与梯度

除了可以传入一个字符串格式的颜色值外，还可以传入CanvasPattern对象或CanvasGradient对象作为颜色值。例如，如果你想要使用图片模板来填充数据集合，可使用如下方式实现：

var img = new Image();
img.src = 'https://example.com.my_image.png';
img.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    var chart = new Chart(ctx, {
        data: {
            labels: ['Item1', 'Item2', 'Item3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    })
}

使用模板填充数据图表可以帮助有视觉缺陷的用户（例如色盲患者）更容易理解你的数据。

使用patternomaly库，你可以生成各种模板来填充数据集合。

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

2.6 字体

有四种全局设置可以用来改变图表上的字体。这些配置选项位于Chart.defaults.global属性中。全局的字体设置只有在非全局的配置选项中没有定义字体相关设置时才会使用。

例如，下面的图表除图例标签外，其他的字体均为红色字体：

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                fontColor: 'black'
            }
        }
    }
});