Блог

Мне нужно установить пользовательские цвета для диаграммы в React. Я использую библиотеку apexcharts. Это файл конфигурации диаграммы, который я использую для другой страницы в своем приложении.

 import React from "react";
import Chart from "react-apexcharts";

export default function CChart(props) {

    let options = {
        theme: {
            palette: 'palette'   props.palette,

        },
        chart: {
            width: '100%',
            id: "basic-bar",
            toolbar: {
                show: false
            }
        },
        fill: {
            gradient: {
                shade: 'light',
                type: "horizontal",
                shadeIntensity: 0.5,
                gradientToColors: undefined,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 1,
                stops: [0, 50, 100],
                colorStops: []
            },
        },
        title: {
            text: props.title
        },
        
        xaxis: {
            categories: props.data,
            labels: {
                style: {
                    colors: [],
                    fontSize: '10px',
                    fontFamily: 'Arial',
                    fontWeight: 400,
                    cssClass: 'apexcharts-xaxis-label',
                },
            }
        }
    };

    const series = [];

    if (props.series) {
        props.series.forEach(serie => {
            series.push({
                name: serie.name,
                data: serie.data.map(d => d[[props.product]])
            });
        });
    }

    return (
        <Chart
            options={options}
            series={series}
            type="line"
            width="500"
        />
    );
}
 

И вот здесь я показываю свою диаграмму:

  <Grid container item md={12} style={style.charts} direction="column">
            <Grid item md={6} style={style.boxChart}>
                <CChart
                    title="Evolución Huella hídrica"
                    data={seasons.map(s => s.name)}
                    series={waterFootprintEvolution}
                    seriesLabel="Litros"
                    product="water_footprint"
                    palette="2"
                />

            </Grid>
 

Мне просто нужно изменить цвета для одного графика, но не для другого, который использует этот шаблон.
Это график, на котором я хочу установить пользовательские цвета

И это график, который использует палитру:

Я новичок в реагировании, поэтому любая помощь была бы потрясающей.

Огромное спасибо

Для рассматриваемого компонента диаграммы вы можете изменить цвет палитры. Каждый компонент может иметь разные цвета палитры. подобный этому:

  <Grid container item md={12} style={style.charts} direction="column">
            <Grid item md={6} style={style.boxChart}>
                <CChart
                    title="Evolución Huella hídrica"
                    data={seasons.map(s => s.name)}
                    series={waterFootprintEvolution}
                    seriesLabel="Litros"
                    product="water_footprint"
                    palette="5"
                />

            </Grid>

 

Я решил эту проблему, добавив новое свойство в свою диаграмму

  <CChart
                    title="Evolución Huella hídrica"
                    data={seasons.map(s => s.name)}
                    series={waterFootprintEvolution}
                    seriesLabel="Litros"
                    product="water_footprint"
                    colors ={colores}
                />
 

Стиль диаграммы:

 export default function CChart(props) {

let options = {
    
    theme: {
        palette: 'palette'   props.palette,

    },
    
    colors: props.colors,
    chart: {
        width: '100%',
        id: "basic-bar",
        toolbar: {
            show: false
        }
    },
    fill: {
        gradient: {
            shade: 'light',
            type: "horizontal",
            shadeIntensity: 0.5,
            gradientToColors: undefined,
            inverseColors: false,
            opacityFrom: 0.5,
            opacityTo: 1,
            stops: [0, 50, 100],
            colorStops: []
        },
    },
    title: {
        text: props.title
    },
    
    xaxis: {
        categories: props.data,
        labels: {
            style: {
                colors: [],
                fontSize: '10px',
                fontFamily: 'Arial',
                fontWeight: 400,
                cssClass: 'apexcharts-xaxis-label',
            },
        }
    }
};

const series = [];

if (props.series) {
    props.series.forEach(serie => {
        series.push({
            name: serie.name,
            data: serie.data.map(d => d[[props.product]])
        });
    });
}

return (
    <Chart
        options={options}
        series={series}
        type="line"
        width="500"
    />
);
 

}