反应自定义颜色图表答案

【问题标题】：React custom colors chart反应自定义颜色图表
【发布时间】：2021-06-14 23:42:42
【问题描述】：

我需要在 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>

我只需要更改一个图表的颜色，而不是使用此模板的另一个图表。这是我要设置自定义颜色的图表

这是使用调色板的图表：

我是新手，所以任何帮助都会很棒。

非常感谢

【问题讨论】：

标签： reactjs charts colors

【解决方案1】：

对于有问题的图表组件，你能改变调色板的颜色吗？每个组件可以有不同的调色板颜色。像这样：

 <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>

【讨论】：

感谢您的回复。我知道我可以改变调色板。我想做的是指定 3 种颜色（蓝色、绿色和灰色）。每个系列一个。

【解决方案2】：

我通过在我的图表中添加一个新属性来解决它

 <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"
    />
);

}

【讨论】：