Chart js -плагин: Как добавить разные цвета к каждой метке? - PullRequest
Новая
       8

Chart js -плагин: Как добавить разные цвета к каждой метке?

0 голосов
/ 29 мая 2020

У меня есть круговая диаграмма с диаграммой js. Затем я добавил метку на каждый p ie благодаря плагину chart- js. Иногда фон p ie немного светлый, поэтому мой белый текст недостаточно виден. Я создал функцию, которая проверяет контраст и окрашивает ее в черный цвет в таком случае.

Но при применении к свойству цвета метки js -plugin диаграммы функция запускается только один раз и сохраняет то же самое цвет для всей этикетки. Как применить разные цвета к каждой этикетке в зависимости от ее фона?

Вот код: 

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

Спасибо!

EDIT:

вот отрисовка моей текущей круговой диаграммы: enter image description here

1 Ответ

0 голосов
/ 29 мая 2020

необходимо указать backgroundColor: [] в Pie Chart для цвета фона. Вот полный пример: 

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