Chartjs-plugin：如何为每个标签添加不同的颜色？

xyhw6mcr 于 2024-01-07 发布在 Chart.js

关注(0)|答案(2)|浏览(159)

我用chartjs做了一个piechart。然后我用chart-js插件在每个饼上添加了一个标签。有时，饼的背景有点浅，所以我的白色文本不够明显。我做了一个函数，在这种情况下检查对比度并将其着色为黑色。
但是当应用到chartjs-plugin的label color属性时，该函数只运行一次，并为所有标签保持相同的颜色。如何根据其背景为每个标签应用不同的颜色？
代码如下：

plugins: {
                datalabels: {
                  color: function(ctx: any) {
                    [...Array(ctx.dataset.data.length)].map((_, i) => {
                      return transformColor(ctx.dataset.backgroundColor[i]);
                    });
                  },

字符集
谢谢你，谢谢
编辑：
下面是我当前的piechart的渲染：x1c 0d1x

chart.js

来源：https://stackoverflow.com/questions/62088423/chartjs-plugin-how-to-add-a-different-color-to-each-label

2条答案

按热度按时间

eni9jsuy1#

您需要在Pie Chart中提供backgroundColor: []作为背景颜色。下面是完整的示例：

import React from "react";
import {makeStyles} from "@material-ui/core/styles";
import {Pie} from "react-chartjs-2";

const useStyles = makeStyles(theme => ({
    chart: {
        marginLeft: theme.spacing(2)
    }
}));

export default function PieChartExample(props) {
    const classes = useStyles();
    const [data, setdata] = React.useState({
        labels: ["type1", "type2", "type3", "type4"],
        datasets: [
            {
                label: "No. of registrations made",
                backgroundColor: [
                    "#3e95cd",
                    "#8e5ea2",
                    "#3cba9f",
                    "#e8c3b9",
                    "#c45850"
                ],
                barThickness: 80,
                data: [50, 100, 75, 20, 0]
            }
        ]
    });

    const getChartData = canvas => {
        return data;
    };
    return (
        <React.Fragment>
            <div
                className={classes.chart}
                style={{position: "relative", width: 900, height: 450}}
            >
                <Pie
                    options={{
                        responsive: true,
                        maintainAspectRatio: true,
                        legend: {display: true},
                        title: {
                            display: true,
                            text: "Title for the graph"
                        }
                    }}
                    onElementsClick={(e) => { console.log(e, 'e')}}
                    data={getChartData}
                />
            </div>
        </React.Fragment>
    );
}

字符集

赞(0）回复(0）举报 2024-01-07

xqkwcwgp2#

我知道这是为时已晚的回应，但这是我得到的。你需要返回的颜色数组，以及不是一个单一的颜色字符串

color: function(ctx: { dataset: { backgroundColor: string[] } }) {
          const backgroundColors = ctx.dataset.backgroundColor || [];
          const textColors: string[] = [];
          backgroundColors.forEach(item => {
            if (isString(item)) {
              const [r, g, b] = item
                .split("(")[1]
                .split(")")[0]
                .split(",");

              const luminance =
                0.299 * Number(r) + 0.587 * Number(g) + 0.114 * Number(b);
              textColors.push(luminance > 128 ? "black" : "white");
            }
          });
          return textColors;
        }

字符集
我使用拆分字符串方法的原因是因为我使用了一个随机颜色生成器，它为每个弧的backgoundColor返回“rgb（）”中的值，

dynamicColors() {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    return "rgb(" + r + "," + g + "," + b + ")";
  }

型

赞(0）回复(0）举报 2024-01-07

我来回答

Chartjs-plugin：如何为每个标签添加不同的颜色？

2条答案

相关问题

热门标签

最新问答