我可以根据数据集项设置Chart.js图表的背景颜色吗？

mfuanj7w 于 2023-10-18 发布在 Chart.js

关注(0)|答案(3)|浏览(167)

我知道在Chart.js中，你可以将一个颜色数组传递给backgroundColor选项，但是是否可以使用当前的dataset项来选择颜色？理想情况下，我想做的事情是：

new Chart(ctx, {
  type: "pie",
  data: {
    datasets: [{
      data: scores,
      backgroundColor: (context) => {
         // This is the key bit. Can I somehow access the current
         // dataset item here from the context?
        return context.item.colour
      }
    }]
  }
})

下面是一个工作示例，其中backgroundColor是一个数组，但我想将其更改为使用基于当前数据集项设置背景的回调函数：

const ctx = document.getElementById('chart')

const dataSet = [
  { name: 'John', score: 10, colour: 'orange' },
  { name: 'Bob', score: 5, colour: 'yellow', },
  { name: 'Alice', score: 20, color: 'pink' }
]

const scores = dataSet.map(data => data.score)

new Chart(ctx, {
  type: "pie",
  data: {
    datasets: [{
      data: scores,
      backgroundColor: ['red', 'green', 'blue'] // Is there a way I can choose the colour based on the dataset item. Ideally, I'd want to access the array item from dataSet and read the `colour` property from there.
    }]
  }
})

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="chart"></canvas>

chart.js

来源：https://stackoverflow.com/questions/77144317/can-i-set-the-background-colour-of-a-chart-js-chart-based-on-the-dataset-item

3条答案

按热度按时间

c9x0cxw01#

要在scriptable选项中访问颜色，您需要将数据集原样传递给chart.js，并使用配置中的解析选项来告诉chart.js数据必须显示在对象的哪个字段中：

const ctx = document.getElementById('chart')

const dataSet = [{
    name: 'John',
    score: 10,
    colour: 'orange'
  },
  {
    name: 'Bob',
    score: 5,
    colour: 'yellow',
  },
  {
    name: 'Alice',
    score: 20,
    colour: 'pink'
  }
]

new Chart(ctx, {
  type: "pie",
  data: {
    datasets: [{
      data: dataSet,
      backgroundColor: (c) => c.raw.colour,
    }]
  },
  options: {
    parsing: {
      key: 'score'
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="chart"></canvas>

赞(0）回复(0）举报 2023-10-18

f3temu5u2#

你可以使用map()来生成一个基于dataSet的颜色数组：

backgroundColor: dataSet.map(({ colour }) => colour)

但是，您也可以使用reduce()将dataSet变量重新处理为CharJS期望的格式。那么你不需要map()来计算分数：

const ctx = document.getElementById('chart')

const dataSet = [
  { name: 'John', score: 10, colour: 'orange' },
  { name: 'Bob', score: 5, colour: 'yellow', },
  { name: 'Alice', score: 20, color: 'pink' }
]

const mappedDataSet = dataSet.reduce((p, { score, colour }) => { 
    p.data.push(score);
    p.backgroundColor.push(colour);
    return p;
}, { data: [], backgroundColor: [] });

new Chart(ctx, {
  type: "pie",
  data: {
    datasets: [ mappedDataSet ]
  }
})

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="chart"></canvas>

赞(0）回复(0）举报 2023-10-18

zaq34kh63#

Chart.js背景色问题

要使用回调函数根据当前数据集项设置backgroundColor，您可以使用传递给回调的上下文参数。对于您的特定需求，您可以使用context.dataIndex来获取当前数据点的索引，然后从dataSet数组中访问相关颜色。

用法示例：

const ctx = document.getElementById('chart').getContext('2d');

const dataSet = [{
    name: 'John',
    score: 10,
    color: 'orange'
  },
  {
    name: 'Bob',
    score: 5,
    color: 'yellow'
  },
  {
    name: 'Alice',
    score: 20,
    color: 'pink'
  } 
];

const scores = dataSet.map(data => data.score);

new Chart(ctx, {
  type: "pie",
  data: {
    labels: dataSet.map(data => data.name),
    datasets: [{
      data: scores,
      backgroundColor: (context) => {
        return dataSet[context.dataIndex].color;
      }
    }]
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js Dynamic Color</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
  <canvas id="chart"></canvas>
</body>

</html>

赞(0）回复(0）举报 2023-10-18

我来回答

我可以根据数据集项设置Chart.js图表的背景颜色吗？

3条答案

Chart.js背景色问题

相关问题

热门标签

最新问答