Help us understand the problem. What is going on with this article?

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

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

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
      }
    }
  }
});

ソースを追いかけてみた

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で半透明にした

  1. カスタム関数を作成
  2. 元の処理にcolorschemesに1行追加
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 // 追加
      }
    }
  }
});

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした