为折线图里的一条线设置渐变的背景色

利用 chart.js 生成一个 chart 实例

1
2
3
4
5
6
7
8
9

// 得到一个 canvas 上下文
var ctx = document.getElementById('canvas').getContext('2d');

// 创建 chart
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

上面代码里传入的 data 选项就是用来画线的数据，其中包含 标签（labels）、数据集(datasets)

如果只有一条线，只需要在 datasets 里放一组数据

1
2
3
4
5
6
7
8
9
10

data: {
  labels: labels,
  datasets: [{
    data: data,
    borderWidth: 2.5,
    borderColor: "#328fde",
    pointRadius: 0,
    backgroundColor: "#fff"
  }]
},

我们为这条线设置了 宽度、颜色、节点的半径、背景色

重点看一下背景色

chart.js 对 backgroundColor 值的要求是：

When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at Chart.defaults.global.defaultColor. It is initially set to ‘rgba(0, 0, 0, 0.1)’.

你可以设置多种格式的颜色作为背景，如果没有指定，它的默认值 是 rgba(0, 0, 0, 0.1)

You can also pass a CanvasGradient object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.

我们还可以传入一个 CanvasGradient

CanvasGradient 接口表示描述渐变的不透明对象。通过 CanvasRenderingContext2D.createLinearGradient() 或 CanvasRenderingContext2D.createRadialGradient() 的返回值得到.

CanvasGradient.addColorStop() 添加一个由偏移(offset)和颜色(color)定义的断点到渐变中。

我们就利用 CanvasGradient 为线条添加渐变的背景色

1
2
3
4
5
6
7

// 通过 createLinearGradient 创建 CanvasGradient 对象
var gradientStroke = ctx.createLinearGradient(0, 0, 0, 100);

// 定义渐变的 偏移 和 颜色
gradientStroke.addColorStop(0, "#328fdebf");
gradientStroke.addColorStop(1, "#ffffff9e");

然后，我们把 chart 数据集里的背景色 更改为 这个 CanvasGradient 对象

1
2
3
4
5
6
7
8
9
10

data: {
  labels: options.labels,
  datasets: [{
    data: options.data,
    borderWidth: 2.5,
    borderColor: "#328fde",
    pointRadius: 0,
    backgroundColor: gradientStroke // 更新背景色为 gradientStroke
  }]
}

这样，就实现了一个渐变的背景