chartjs-plugin-colorschemes 棒グラフを半透明にしたい

# options.plugins.colorschemes.fillAlphaを設定してもできない

半透明にする場合は、`fillAlpha`を設定するらしい。

>| Name | Type | Default | Description |
|:--|:--|--:|:--|
| fillAlpha | number | 0.5 | The transparency value for the line fill color. Must be a number between 0.0 (fully transparent) and 1.0 (no transparency). |
[nagix/chartjs-plugin-colorschemes](https://github.com/nagix/chartjs-plugin-colorschemes#configuration)

設定してみたが半透明にならない。

```js:hoge.js
const ctx = document.getElementById('chart-bar').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: 'ラベル',
    datasets: [{
        data: [0,10,20,30]
      }]
  },
  options: {
    plugins: {
      // カラースキーム
      colorschemes: {
        scheme: 'brewer.PastelOne4',
        fillAlpha: 0.2
      }
    }
  }
});

```

# ソースを追いかけてみた

```js:chartjs-plugin-colorschemes.js
switch (dataset.type || chart.config.type) {
// For line, radar and scatter chart, borderColor and backgroundColor (50% transparent) are set
case 'line':
case 'radar':
case 'scatter':
	if (typeof dataset.backgroundColor === 'undefined' || override) {
		dataset[EXPANDO_KEY].backgroundColor = dataset.backgroundColor;
		dataset.backgroundColor = helpers.color(color).alpha(fillAlpha).rgbString();
	}
	if (typeof dataset.borderColor === 'undefined' || override) {
		dataset[EXPANDO_KEY].borderColor = dataset.borderColor;
		dataset.borderColor = color;
	}
	if (typeof dataset.pointBackgroundColor === 'undefined' || override) {
		dataset[EXPANDO_KEY].pointBackgroundColor = dataset.pointBackgroundColor;
		dataset.pointBackgroundColor = helpers.color(color).alpha(fillAlpha).rgbString();
	}
	if (typeof dataset.pointBorderColor === 'undefined' || override) {
		dataset[EXPANDO_KEY].pointBorderColor = dataset.pointBorderColor;
		dataset.pointBorderColor = color;
	}
	break;
// For doughnut and pie chart, backgroundColor is set to an array of colors
case 'doughnut':
case 'pie':
case 'polarArea':
	if (typeof dataset.backgroundColor === 'undefined' || override) {
		dataset[EXPANDO_KEY].backgroundColor = dataset.backgroundColor;
		dataset.backgroundColor = dataset.data.map(function(data, dataIndex) {
			colorIndex = dataIndex % length;
			return scheme[reverse ? length - colorIndex - 1 : colorIndex];
		});
	}
	break;
// For the other chart, only backgroundColor is set
default:
	if (typeof dataset.backgroundColor === 'undefined' || override) {
		dataset[EXPANDO_KEY].backgroundColor = dataset.backgroundColor;
		dataset.backgroundColor = color;
	}
	break;
}

```

半透明にしているところは、`helpers.color(color).alpha(fillAlpha).rgbString();`のあたり。
棒グラフはtypeが`bar`なので`default`のケースに入る。
`default`では、半透明の処理が入っていないので、頑張って設定しても反映されなかったっぽい。

# [代案][custom-Function](https://github.com/nagix/chartjs-plugin-colorschemes#custom-function)で半透明にした

1. カスタム関数を作成
2. 元の処理に`colorschemes`に1行追加

```js:hoge.js
// カスタム関数を追加
let addAlpaFunc = function (schemeColors) {
  return schemeColors.map(function (elm) {
    // rgba値に変換
    let alpha = 0.5;
    let red = parseInt(elm.substring(1, 3), 16);
    let green = parseInt(elm.substring(3, 5), 16);
    let blue = parseInt(elm.substring(5, 7), 16);
    let rgba = [red, green, blue, alpha].join(',');
    return "rgba(" + rgba + ")";
  });
}

// 元の処理
const ctx = document.getElementById('chart-bar').getContext('2d');
const myChart = new Chart(ctx, {
  ...
  options: {
    plugins: {
      // カラースキーム
      colorschemes: {
        scheme: 'brewer.PastelOne4',
        custom: addAlpaFunc // 追加
      }
    }
  }
});

```

これで反映できた。
とっても回りくどいので、他の方法がある気がする。